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 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
javascript 写类方式之四
2009/07/05 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
专家推荐信模板
2014/05/09 职场文书
会计专业自荐信
2014/06/03 职场文书
学习十八大演讲稿
2014/09/15 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
保姆聘用合同
2015/09/21 职场文书
python神经网络ResNet50模型
2022/05/06 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL