栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

需要实现的效果:一个输入框,当输入框未获得焦点的时候,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的输入框

$(“#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();
}
});

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/109593.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号