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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
简单实现js拖拽效果
Jul 25 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
JavaScript中的null和undefined用法解析
Sep 30 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
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP函数超时处理方法
2016/02/14 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Linux下python3.7.0安装教程
2018/07/30 Python
python中对数据进行各种排序的方法
2019/07/02 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
中学生学习生活的自我评价
2013/10/26 职场文书
《理想》教学反思
2014/02/17 职场文书
初中军训感想300字
2014/03/05 职场文书
物理教育专业求职信
2014/06/25 职场文书
通信工程求职信
2014/07/16 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
家长学校教学计划
2015/01/19 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技