ie8下修改input的type属性报错

2024-04-27 14:19:09

字体：大中小

来源：转载

供稿：网友

ie8下修改input的type属性报错

摘要：

　　现在有一个需求如图所示，当用户勾选显示明文复选框时，要以明文显示用户输入的密码，去掉勾选时要变回密文，刚开始想到的就是修改输入框的type来决定显示明文还是密文，使用jQuery的attr来做试验，测试结果是Chrome，Firefox，ie9+都是好的，在ie8以下就会报错，查找了下原因，ie8中是不允许修改input的type属性，最终换了种思路实现。

当勾选显示明文时替换输入框为type="text"，不勾选时在将输入框替换为type="passWord"，代码如下：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <title></title> 5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6     <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 7 </head> 8 <body> 9     <span id="pass"><input name="password" type="password"></span><label><input type="checkbox" id="show-password">显示明文</label>10     <script>11         $('#show-password').click(function() {12             var inp,cname,val;13             if(this.checked) {14                 inp   = $('#pass').children('input');15                 cname = inp.attr('name');16                 val   = inp.val();17                 $('#pass').html('<input name="'+cname+'" value="'+val+'" type="text">');18             } else {19                 inp   = $('#pass').children('input');20                 cname = inp.attr('name');21                 val   = inp.val();22                 $('#pass').html('<input name="'+cname+'" value="'+val+'" type="password">');23             }24         });25     </script>26 </body>27 </html>