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 jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
深入理解React高阶组件
Sep 28 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php购物车实现方法
2015/01/03 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
理解Python中的类与实例
2015/04/27 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
Python字符串的修改方法实例
2019/12/19 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python读写Excel表格的方法
2021/03/02 Python
某科技软件测试面试题
2013/05/19 面试题
年度考核自我评价
2014/01/25 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
铲车司机岗位职责
2014/03/15 职场文书
投资合作协议书范本
2014/04/17 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
教师工作能力自我评价
2015/03/04 职场文书
转学证明范本
2015/06/19 职场文书
小学生读书笔记
2015/07/01 职场文书
JavaScript组合继承详解
2021/11/07 Javascript