JS 动态修改 input 的 type 属性



调用: $(“#uname”);可选参数class为获取焦点时input的class，但是清除密码的时候出了一个问题，用户输入的密码应该是 ”*****”，这里需要将input 的type 属性由 text 换成 password ，如果用户没有输入密码，鼠标失去焦点的时候 type换回 text ，value 值为 “密码”。



 



[javascript]  view plain copy

  


1. $("#pswd").focus(function(){  
2. this).attr('type','password');  
3. });



发现并没有实现预期效果，出现 uncaught exception type property can’t bechanged 错误，查看jQuery 1.42源码 1488 行



[javascript]  view plain copy

  



    1. // We can't allow the type property to be changed (since itcauses problems in IE)
2. if ( name === "type"
3. "type property can't be changed");  
4. }



     



    jQuery 修改不了用源生的JS呢？



    [javascript]  view plain copy

      


    1. $("#pwd").focus(function(){  
2. "#pwd")[0].type = 'password';  
3. "#pwd").val("");  
4. });



     



    发现在FF下可以修改并将密码输入框type 修改为 “password” 并将value设置为空，而IE下却提示无法得到type属性，不支持该命令。 弹出 type 看看真的无法得到吗？



     



    [javascript]  view plain copy

      



    1. $("#pwd").focus(function(){  
2. "#pwd")[0].type);  
3. "#pwd")[0].type = 'password';  
4. "#pwd").val("");  
5. });



     



    发现弹出text ，原来不是无法得到，只是IE下不能修改。 各种 google后发现input的type属性只能在初始的时候设定却不能修改（IE不能，FF可以，个人认为，不知道是否准确，如有不对请大牛指教）。这样我是否可以先remove然后再生成一个type是password的密码输入框呢？



    [javascript]  view plain copy

      


    1. $("#pwd").focus(function(){  
2. "#pwd").remove();  
3. "body").append('<input id="pwd"name="pwd" type="password" />');  
4. "#pwd").focus(); // 焦点转移
5. );



    可以实现，但是输入为空鼠标失去焦点再返回到起始状态的时候不怎么好写，节点生成删除为什么不用两个密码框来显示隐藏呢？



     



    [html]  view plain copy

      


    1. <input id="showPwd" class="txt" type="text" value="密码" tabindex="2" />
2. <input id="pwd" class="txt" name="password" type="password" />


    [javascript]  view plain copy

      



    1. var showPwd = $("#showPwd"), pwd = $("#pwd");  
2. showPwd.focus(function(){  
3.    pwd.show().focus();  
4.    showPwd.hide();  
5. });  
6.   
7. pwd.blur(function(){  
8. if(pwd.val()=="") {  
9.        showPwd.show();  
10.        pwd.hide();  
11.     }  
12. });