js动态修改input输入框的type属性
<input name="password" type="text" id="showPwd" tabindex="2" value="密码" />?我们很直接会想到下面的js
$("#showPwd").focus(function(){ $(this).attr('type','password');});?发现并没有实现预期效果，出现 uncaught exception type property can’t bechanged 错误，查看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的密码输入框。<input name="password" type="password" id="password" 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();}});?最终效果：当输入框获得焦点的时，输入的内容显示为“****”；当失去焦点的时，内容为空时显示“密码”。