js动态修改input输入框的type属性(实现方法解析)
需要实现的效果:一个输入框,当输入框未获得焦点的时候,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();
}
});
最终效果: 当输入框获得焦点的时,输入的内容显示为“****”;当失去焦点的时,内容为空时显示“密码”。
相关文章
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
这篇文章主要介绍了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法,涉及js数据传输及定义响应事件相关操作技巧,需要的朋友可以参考下2017-05-05如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用,感兴趣的朋友一起学习吧2016-03-03
最新评论