摘要：

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

ie8下修改input的type属性报错相关推荐

JQuery中如何动态修改input的type属性
代码如下: 1 jQuery(".member_id").focus(function() { 2 jQuery(this).val(''); 3 }).blur(function ...
JQ无法修改input的type属性的替代解决方法
JQ无法修改input的type属性的替代解决方法参考文章: (1)JQ无法修改input的type属性的替代解决方法 (2)https://www.cnblogs.com/wsun/p/56300 ...
ie下input的type属性为hidden问题
2019独角兽企业重金招聘Python工程师标准>>> ie下input的type属性为hidden有时候ie是解析不正确的. 今天碰到一个问题,服务器端返回一个div内容如下: & ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
html中input中type属性值,HTML的input中type属性的属性值包括哪些
HTML的input中type属性的属性值包括哪些 (2011-11-25 16:44:40) 标签: 杂谈 1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideF ...
input的type属性和textarea标签
input的type属性 type的值和描述以下我只列举了text的类型和submit类型 button 定义可点击按钮(多数情况下,用于通过 JavaScript 里的事件). checkbox ...
前端：HTML5/36/HTML5简介，文档类型定义，网页字符集，页面结构标记，文章相关的标记，其它标记，音频标记，视频标记，表单中新增的属性，表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
html5 input的type属性启动数字输入法
当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出启动数字键盘的需求,我和大多数人一样用 this.style ...
input的type属性整理
## **整理input的type属性** 1. type = text 这是我们见得最多也是用的最多的,比如用于登录页面输入用户名,注册是输入电话号码,邮箱等参数: a:name 表示文本输入框名 ...

ie8下修改input的type属性报错

摘要：

总结：

ie8下修改input的type属性报错相关推荐

最新文章

热门文章