当前位置:Gxlcms > JavaScript > ie8下修改input的type属性报错的解决方法

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

时间:2021-07-01 10:21:17 帮助过:6人阅读

摘要:

现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的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以下兼容性问题。如果你的项目中也有这种交互可以参考下,或者你有更好的方法可以和我一起分享。

人气教程排行