ie8下修改input的type属性报错
摘要：
现在有一个需求如图所示，当用户勾选显示明文复选框时，要以明文显示用户输入的密码，去掉勾选时要变回密文，刚开始想到的就是修改输入框的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属性报错的更多相关文章
- js修改input的type属性问题
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...
- JQuery中如何动态修改input的type属性
代码如下: jQuery(".member_id").focus(function() { jQuery(this).val(''); }).blur(function() { i ...
- 修改input的type属性
在ff和chrome中是可以直接修改input的type属性的,但是在ie下面是不允许的. 用jquery 的attr方法去修改,在jquery1.8.3版本会直接抛出异常,但在1.9及以上版本就不再 ...
- jauery改变inout的type属性报错type property can’t be changed
uncaught exception type property can’t be changed 使用代码$("#pwd").attr("type",&quo ...
- JQ无法修改input的type属性的替代解决方法
需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...
- js修改input的type属性问题（兼容所有浏览器，主要用于密码类的默认有提示文字的效果）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- [Liferay6.2.2]AUI的小坑：input的type属性
<aui:input name="name" label="姓名" value="<%=student.getName() %>&q ...
- html5 input的type属性启动数字输入法
html5 input的type属性启动数字输入法 当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...
- input的type属性
input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...
随机推荐
- 从JDBC程序看为什么需要Mybatis
package com.xuebusi.jdbc; import java.sql.*; /** * 从JDBC程序看为什么需要Mybatis * * 1.加载驱动程序和数据库连接所需要的url.用户 ...
- 带包的java类在cmd环境下的执行办法
带包的java类在cmd环境下的执行办法:工程目录为D:\Program Files\eclipse\workspace\ReadFileByLinesUniq上面目录下有两个文件夹bin和src源文 ...
- js中定义属性和变量
//定义数组 var arr = []; //定义对象 var obj = {}; //定义正则表达式 var reg = /../;
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 【iOS】TableView的footerView不随cell滚动而停留在tableView底部的问题
苹果官方给我提供TableView的FooterView和HeaderView停留在顶部的非常不错效果,有时候我们不须要这些FooterView和HeaderView停留在底部或者上部,如今就以Foo ...
- 【Unity】计时器
看了好些方法,终于找到一个超级好用的计时器,立马转载马住了! http://www.gimoo.net/t/1602/56bfcc8a26757.html 运行效果如下: 思路:记录当前游戏时间然后进 ...
- signal(SIGCHLD, SIG_IGN)和signal(SIGPIPE, SIG_IGN);
signal(SIGCHLD, SIG_IGN); //忽略SIGCHLD信号,这常用于并发服务器的性能的一个技巧 //因为并发服务器常常fork很多子进程,子进程终结之后需要//服务器进程去wait ...
- Android——ArrayList 、LinkList、List 区别 & 迭代器iterator的使用 & HashMap、Hashtable、LinkedHashMap、TreeMap
ArrayList .LinkList.List 区别 & 迭代器iterator的使用 & HashMap.Hashtable.LinkedHashMap.TreeMap 一.几个 ...
- CAS (2) —— Mac下配置CAS到Tomcat（客户端）
CAS (2) -- Mac下配置CAS到Tomcat(客户端) tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 cas版本: cas4.1.2 cas-clie ...
- Java上的jQuery？解析HTML利器—Jsoup
也许大家有过在java运行平台上解析html的经历,通常的方式是将HTML以XML的形式进行结点解析,调用java本身的xml解析类库.这样的方式很容易理解并且很方便,但习惯用jQuery的各位是否在 ...