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 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
js实现无缝循环滚动
Jun 23 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
js实现漂亮的星空背景
Nov 01 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 结果集的分页实现代码
2009/03/10 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
深入浅析python继承问题
2016/05/29 Python
python实现图片处理和特征提取详解
2017/11/13 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python 元组的使用方法
2020/06/09 Python
pytorch实现查看当前学习率
2020/06/24 Python
python 两种方法删除空文件夹
2020/09/29 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
2015年大学生党员承诺书
2015/04/27 职场文书
国庆节主题班会
2015/08/15 职场文书
Django实现翻页的示例代码
2021/05/24 Python