ie8下修改input的type属性报错

简介: 摘要:   现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做试验,测试结果是chrome,Firefox,ie9+都是好的,在ie8以下就会报错,查找了下原因,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>

 总结:

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

相关文章
|
12月前
|
缓存 JavaScript 前端开发
vuecli3 项目在 ie11 下面白屏报错:SCRIPT1002: 语法错误
vuecli3 项目在 ie11 下面白屏报错:SCRIPT1002: 语法错误
213 0
|
Web App开发 JavaScript 前端开发
Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset
Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset
324 0
|
JavaScript
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
180 0
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
|
安全 应用服务中间件 网络安全
vps部署ssl,让域名可以https访问的最简单的办法 ssl无法ie访问 https在ie访问报错的处理办法
vps部署ssl,让域名可以https访问的最简单的办法 ssl无法ie访问 https在ie访问报错的处理办法
364 0
vps部署ssl,让域名可以https访问的最简单的办法 ssl无法ie访问 https在ie访问报错的处理办法
|
Windows
el-input在ie浏览器下readonly属性出现光标
el-input在ie浏览器下readonly属性出现光标
194 0
|
JavaScript
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
393 0
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
|
Web App开发 JavaScript 数据安全/隐私保护
ie8下修改input的type属性报错
ie8下修改input的type属性报错
|
JavaScript
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
537 0
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
IE浏览器url中带中文报错的问题;以及各种兼容以及浏览器问题总结
1.解决IE浏览器url带中文报错 /* encodeURI()解决IE浏览器请求url中带中文报错的问题 */ diag.URL = encodeURI("vehicles/goEditBind.
1732 0
|
Web App开发 前端开发 JavaScript