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中的稀疏数组与密集数组[译]
Sep 17 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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
PHP 开源框架22个简单简介
2009/08/24 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
JavaScript实现表格排序方法
2013/06/14 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
Oracle的内存结构(Memory structures)
2015/06/10 面试题
学校搬迁方案
2014/06/15 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
公司员工管理制度
2015/08/04 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
Python获取字典中某个key的value
2022/04/13 Python