js动态修改input输入框的type属性(实现方法解析)


Posted in Javascript onNovember 13, 2013

需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 “密码”;当输入框失去焦点的时候,输入内容显示为”*****”

<input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” />

我们很直接会想到下面的js

$(“#showPwd”).focus(function(){
$(this).attr(‘type','password');
});

发现并没有实现预期效果,出现 uncaught exception type property can't be changed 错误,查看jQuery 1.42源码 1488 行

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “type property can't be changed” );
}

jQuery 修改不了用源生的JS呢?

$(“#pwd”).focus(function(){
$(“#pwd”)[0].type = ‘password';
$(“#pwd”).val(“”);
});

发现在FF下可以修改并将密码输入框type 修改为 “password” 并将 value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?

$(“#showPwd”).focus(function(){
alert($(“#showPwd”)[0].type);
$(“#showPwd”)[0].type = ‘password';
$(“#showPwd”).val(“”);
});

发现弹出text ,原来不是无法得到,只是IE下不能修改。 因此,我们想到可以先remove然后再生成一个type是password的密码输入框。

下面type为password的输入框

<input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />

$(“#showPwd”).focus(function() {
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(“#showPwd”).hide();
$(“#password”).show().focus();
}
});
$(“#password”).blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#password”).hide();
}
});

最终效果: 当输入框获得焦点的时,输入的内容显示为“****”;当失去焦点的时,内容为空时显示“密码”。

Javascript 相关文章推荐
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
详谈javascript中的cookie
Jun 03 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
js字母大小写转换实现方法总结
Nov 13 #Javascript
jQuery替换字符串(实例代码)
Nov 13 #Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 #Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 #Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 #Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 #Javascript
屏蔽script注入小例子
Nov 12 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
解决Python requests 报错方法集锦
2017/03/19 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python 实现倒排索引的方法
2018/12/25 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python range与enumerate函数区别解析
2020/02/28 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
客服服务心得体会
2013/12/30 职场文书
金融管理应届生求职信
2014/02/20 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
房屋所有权证明
2014/10/20 职场文书
安全学习心得体会范文
2016/01/18 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
spring boot实现文件上传
2022/08/14 Java/Android