首页 > 代码库 > ie8下修改input的type属性报错
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="http://www.mamicode.com/‘+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="http://www.mamicode.com/‘+val+‘" type="password">‘);23 }24 });25 </script>26 </body>27 </html>
总结：
这篇文章并没有什么技术含量，但是这种交互还是存在的，写这篇文章主要还是考虑到ie8以下兼容性问题。如果你的项目中也有这种交互可以参考下，或者你有更好的方法可以和我一起分享。
ie8下修改input的type属性报错
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。