ie8下修改input的type属性报错的解决方法

时间：2021-05-28

摘要：

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

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

<!DOCTYPE html><html><head><title></title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script src="jquery.min.js"></script></head><body><span id="pass"><input name="password" type="password"></span><label><input type="checkbox" id="show-password">显示明文</label><script>$('#show-password').click(function() {var inp,cname,val;if(this.checked) {inp = $('#pass').children('input');cname = inp.attr('name');val = inp.val();$('#pass').html('<input name="'+cname+'" value="'+val+'" type="text">');} else {inp = $('#pass').children('input');cname = inp.attr('name');val = inp.val();$('#pass').html('<input name="'+cname+'" value="'+val+'" type="password">');}});</script></body></html>

总结：

这篇文章并没有什么技术含量，但是这种交互还是存在的，写这篇文章主要还是考虑到ie8以下兼容性问题。如果你的项目中也有这种交互可以参考下，或者你有更好的方法可以和我一起分享。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章