摘要：

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

ie8下修改input的type属性报错的更多相关文章

  1. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  2. JQuery中如何动态修改input的type属性

    代码如下: jQuery(".member_id").focus(function() { jQuery(this).val(''); }).blur(function() { i ...

  3. 修改input的type属性

    在ff和chrome中是可以直接修改input的type属性的,但是在ie下面是不允许的. 用jquery 的attr方法去修改,在jquery1.8.3版本会直接抛出异常,但在1.9及以上版本就不再 ...

  4. jauery改变inout的type属性报错type property can’t be changed

    uncaught exception type property can’t be changed 使用代码$("#pwd").attr("type",&quo ...

  5. JQ无法修改input的type属性的替代解决方法

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...

  6. js修改input的type属性问题（兼容所有浏览器，主要用于密码类的默认有提示文字的效果）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. [Liferay6.2.2]AUI的小坑：input的type属性

    <aui:input name="name" label="姓名" value="<%=student.getName() %>&q ...

  8. html5 input的type属性启动数字输入法

    html5 input的type属性启动数字输入法   当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...

  9. input的type属性

    input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...

随机推荐

  1. C#中的 .NET 弱事件模式

    引言 你可能知道,事件处理是内存泄漏的一个常见来源,它由不再使用的对象存留产生,你也许认为它们应该已经被回收了,但不是,并有充分的理由. 在这个短文中(期望如此),我会在 .Net 框架的上下文事件处 ...

  2. Linux音频编程指南(转)

    转自: http://www.ibm.com/developerworks/cn/linux/l-audio/ Linux音频编程指南 虽然目前Linux的优势主要体现在网络服务方面,但事实上同样也有 ...

  3. "高级"数据库小结

    刚刚考完高级数据库,这里有多高级等后面考完组合数学和算法再细聊.试卷在往年基础上改进了部分题目(貌似有人知道新题目的来源,如查询优化树),也可能是两份试卷交叉年份考.总之会的还是会,没看过的当然不会只 ...

  4. iOS-ARC-环境下如何查看引用计数的变化

    iOS-ARC-环境下如何查看引用计数的变化 一,新建立一个工程,用于测试引用计数的变化. 二,找到如下路径Build Phases---->Compile Sources---->App ...

  5. [转帖]cocos2D-X源码分析之从cocos2D-X学习OpenGL（2）----QUAD_COMMAND

    原文:cocos2D-X源码分析之从cocos2D-X学习OpenGL(2)----QUAD_COMMAND 上一篇文章介绍了cocos2d-x的基本渲染结构,这篇顺着之前的渲染结构介绍渲染命令QUA ...

  6. display与visibility的区别

    style.visibility和style.display都可以实现对页的隐藏,但visibility要占用域的空间,而display则不占用 将元素display属性设为 block,会在该元素后 ...

  7. How To Install and Configure Elasticsearch on Ubuntu 14.04

    Reference: https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-elasticsear ...

  8. JAVA-JSP动作元素之forward

    相关资料:<21天学通Java Web开发> 结果总结:1.用来转移用户的请求,使得用户请求的页面从一个页面跳转到另一个页面.2.跳转为服务器端跳转,所以用户的地址栏不会发生任何变化.3. ...

  9. 略过ftp利用samba共享

    开发阶段每次通过ftp上传代码到服务器是件麻烦事,而且有时候一些小错误直接通过ftp在服务器上修改后,容易忘记在本地保存. 于是想到了网络共享,windows上直接挂载网络硬盘,这样就可以略过ftp了 ...

  10. 【WPF】对话框/消息弹窗

    非模式对话框 需求:弹窗是非模式对话框,即可以多个弹窗弹出,且弹窗后面的窗体可以被操作,不会被锁定. 自定义的窗体Window实现以下步骤: 在C#代码中弹出窗体时,使用 window.Show() ...