更改 input type 的值
2015-12-09 18:39
141 查看
需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 “密码”;当输入框失去焦点的时候,输入内容显示为”*****”
<input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” />
我们很直接会想到下面的js
$(“#showPwd”).focus(function(){
$(this).attr(‘type','password');
});
发现并没有实现预期效果,出现 uncaught exception type property can't be changed 错误,查看jQuery 1.42源码 1488 行
// We can't allow the type property to be changed (since it causes problems in IE)
if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “type property can't be changed” );
}
jQuery 修改不了用源生的JS呢?
$(“#pwd”).focus(function(){
$(“#pwd”)[0].type = ‘password';
$(“#pwd”).val(“”);
});
发现在FF下可以修改并将密码输入框type 修改为 “password” 并将 value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?
$(“#showPwd”).focus(function(){
alert($(“#showPwd”)[0].type);
$(“#showPwd”)[0].type = ‘password';
$(“#showPwd”).val(“”);
});
发现弹出text ,原来不是无法得到,只是IE下不能修改。 因此,我们想到可以先remove然后再生成一个type是password的密码输入框。
下面type为password的输入框
<input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />
$(“#showPwd”).focus(function() {
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(“#showPwd”).hide();
$(“#password”).show().focus();
}
});
$(“#password”).blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#password”).hide();
}
});
最终效果: 当输入框获得焦点的时,输入的内容显示为“****”;当失去焦点的时,内容为空时显示“密码”。
<input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” />
我们很直接会想到下面的js
$(“#showPwd”).focus(function(){
$(this).attr(‘type','password');
});
发现并没有实现预期效果,出现 uncaught exception type property can't be changed 错误,查看jQuery 1.42源码 1488 行
// We can't allow the type property to be changed (since it causes problems in IE)
if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “type property can't be changed” );
}
jQuery 修改不了用源生的JS呢?
$(“#pwd”).focus(function(){
$(“#pwd”)[0].type = ‘password';
$(“#pwd”).val(“”);
});
发现在FF下可以修改并将密码输入框type 修改为 “password” 并将 value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?
$(“#showPwd”).focus(function(){
alert($(“#showPwd”)[0].type);
$(“#showPwd”)[0].type = ‘password';
$(“#showPwd”).val(“”);
});
发现弹出text ,原来不是无法得到,只是IE下不能修改。 因此,我们想到可以先remove然后再生成一个type是password的密码输入框。
下面type为password的输入框
<input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />
$(“#showPwd”).focus(function() {
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(“#showPwd”).hide();
$(“#password”).show().focus();
}
});
$(“#password”).blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#password”).hide();
}
});
最终效果: 当输入框获得焦点的时,输入的内容显示为“****”;当失去焦点的时,内容为空时显示“密码”。
相关文章推荐
- 正则表达式常用符号:
- 通过UIEdgeInsetsMake来制作可伸缩的Button(图片拉伸)
- 面向对象
- pullToRefreshGridView里面不显示数据
- [leetcode] 213. House Robber II
- 第一篇文章--乱写
- linux下安装node出现的node命令找不到,express命令找不到的问题,解决方法。
- iOS常用的宏(整理)--持续更新
- 对象的初始化过程
- 监控内存溢出lib
- java内存泄露
- zzulioj 1801: xue姐的小动物 (排序)水
- Android学习笔记(8):ViewGroup类
- 将Emoji表情添加到项目中
- 二分K-means聚类,K-Means改进
- (转)对DotNet分布式应用搭建的考虑
- 一鸣惊人: 楚庄王(第一篇
- sql面试题(学生表_课程表_成绩表_教师表)
- MQTT学习1——CentOS下安装Mosquitto
- Solaris 查看端口占用情况并找到对应进程