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


Posted in Javascript onSeptember 16, 2014

摘要:

现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做试验,测试结果是chrome,Firefox,ie9+都是好的,在ie8以下就会报错,查找了下原因,ie8中是不允许修改input的type属性,最终换了种思路实现。
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以下兼容性问题。如果你的项目中也有这种交互可以参考下,或者你有更好的方法可以和我一起分享。

Javascript 相关文章推荐
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 #Javascript
JavaScript的各种常见函数定义方法
Sep 16 #Javascript
JavaScript中合并数组的N种方法
Sep 16 #Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 #Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 #Javascript
JavaScript的arguments对象应用示例
Sep 15 #Javascript
avascript中的自执行匿名函数应用示例
Sep 15 #Javascript
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
十天学会php(2)
2006/10/09 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
用Webpack构建Vue项目的实践
2017/11/07 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python版本五子棋的实现代码
2018/12/11 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
采购主管岗位职责
2014/02/01 职场文书
毕业晚会主持词
2014/03/24 职场文书
租赁协议书范本
2014/04/22 职场文书
护士个人年终总结
2015/02/13 职场文书
岗位聘任报告
2015/03/02 职场文书
文员岗位职责范本
2015/04/16 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android