JS 动态修改 input 的 type 属性 - teresa502的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/teresa502/article/details/6546361
2014-02-22 22:03
806 查看
JS 动态修改 input 的 type 属性
调用: $(“#uname”);可选参数class为获取焦点时input的class,但是清除密码的时候出了一个问题,用户输入的密码应该是 ”*****”,这里需要将input 的type 属性由 text 换成 password ,如果用户没有输入密码,鼠标失去焦点的时候 type换回 text ,value 值为 “密码”。
[javascript] view plaincopy
$("#pswd").focus(function(){
$(this).attr('type','password');
});
发现并没有实现预期效果,出现 uncaught exception type property can’t bechanged 错误,查看jQuery 1.42源码 1488 行
[javascript] view plaincopy
// We can't allow the type property to be changed (since itcauses problems in IE)
if ( name === "type" &&rtype.test( elem.nodeName ) &&elem.parentNode ) {
jQuery.error( "type property can't be changed");
}
jQuery 修改不了用源生的JS呢?
[javascript] view plaincopy
$("#pwd").focus(function(){
$("#pwd")[0].type = 'password';
$("#pwd").val("");
});
发现在FF下可以修改并将密码输入框type 修改为 “password” 并将value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?
[javascript] view plaincopy
$("#pwd").focus(function(){
alert($("#pwd")[0].type);
$("#pwd")[0].type = 'password';
$("#pwd").val("");
});
发现弹出text ,原来不是无法得到,只是IE下不能修改。 各种 google后发现input的type属性只能在初始的时候设定却不能修改(IE不能,FF可以,个人认为,不知道是否准确,如有不对请大牛指教)。这样我是否可以先remove然后再生成一个type是password的密码输入框呢?
[javascript] view plaincopy
$("#pwd").focus(function(){
$("#pwd").remove();
$("body").append('<input id="pwd"name="pwd" type="password" />');
$("#pwd").focus(); // 焦点转移
);
可以实现,但是输入为空鼠标失去焦点再返回到起始状态的时候不怎么好写,节点生成删除为什么不用两个密码框来显示隐藏呢?
[html] view plaincopy
<input id="showPwd" class="txt" type="text" value="密码" tabindex="2" />
<input id="pwd" class="txt" name="password" type="password" />
[javascript] view plaincopy
var showPwd = $("#showPwd"), pwd = $("#pwd");
showPwd.focus(function(){
pwd.show().focus();
showPwd.hide();
});
pwd.blur(function(){
if(pwd.val()=="") {
showPwd.show();
pwd.hide();
}
});
调用: $(“#uname”);可选参数class为获取焦点时input的class,但是清除密码的时候出了一个问题,用户输入的密码应该是 ”*****”,这里需要将input 的type 属性由 text 换成 password ,如果用户没有输入密码,鼠标失去焦点的时候 type换回 text ,value 值为 “密码”。
[javascript] view plaincopy
$("#pswd").focus(function(){
$(this).attr('type','password');
});
发现并没有实现预期效果,出现 uncaught exception type property can’t bechanged 错误,查看jQuery 1.42源码 1488 行
[javascript] view plaincopy
// We can't allow the type property to be changed (since itcauses problems in IE)
if ( name === "type" &&rtype.test( elem.nodeName ) &&elem.parentNode ) {
jQuery.error( "type property can't be changed");
}
jQuery 修改不了用源生的JS呢?
[javascript] view plaincopy
$("#pwd").focus(function(){
$("#pwd")[0].type = 'password';
$("#pwd").val("");
});
发现在FF下可以修改并将密码输入框type 修改为 “password” 并将value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?
[javascript] view plaincopy
$("#pwd").focus(function(){
alert($("#pwd")[0].type);
$("#pwd")[0].type = 'password';
$("#pwd").val("");
});
发现弹出text ,原来不是无法得到,只是IE下不能修改。 各种 google后发现input的type属性只能在初始的时候设定却不能修改(IE不能,FF可以,个人认为,不知道是否准确,如有不对请大牛指教)。这样我是否可以先remove然后再生成一个type是password的密码输入框呢?
[javascript] view plaincopy
$("#pwd").focus(function(){
$("#pwd").remove();
$("body").append('<input id="pwd"name="pwd" type="password" />');
$("#pwd").focus(); // 焦点转移
);
可以实现,但是输入为空鼠标失去焦点再返回到起始状态的时候不怎么好写,节点生成删除为什么不用两个密码框来显示隐藏呢?
[html] view plaincopy
<input id="showPwd" class="txt" type="text" value="密码" tabindex="2" />
<input id="pwd" class="txt" name="password" type="password" />
[javascript] view plaincopy
var showPwd = $("#showPwd"), pwd = $("#pwd");
showPwd.focus(function(){
pwd.show().focus();
showPwd.hide();
});
pwd.blur(function(){
if(pwd.val()=="") {
showPwd.show();
pwd.hide();
}
});
相关文章推荐
- JS 动态修改 input 的 type 属性
- PrintStream: - shichunle的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/shichunle/article/details/6754930
- java.lang.IllegalArgumentException: argument type mismatch解决方法 - shinn613的专栏 - 博客频道 - CSDN.NET
- js动态修改input输入框的type属性(实现方法解析)
- C# UI常用操作 - Mars的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/shuyizhi/article/details/6830405
- js动态修改input输入框的type属性(实现方法解析)
- HttpSessionBindingListener和HttpSessionAttributeListener区别 - gengkunpeng的专栏 - 博客频道 - CSDN.NET
- HTTP Range说明 - lenoval的专栏 - 博客频道 - CSDN.NET
- csdn如何转载别人的文章 - jiangping_zhu的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/jiangping_zhu/article/detail
- Node.js 中文乱码解决 - hongweigg的专栏 - 博客频道 - CSDN.NET
- java.ByteArrayInputStream与ByteArrayOutputStream再次理解 - CodeAnt的专栏 - 博客频道 - CSDN.NET http://blog.csdn.
- JS 动态修改 input 的 type 属性
- Unity Mecanim在大型mmo中的应用 - langresser的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/langresser_king/artic
- 理解和正确使用Java中的断言(assert) - Leichelle的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/leichelle/article/deta
- 【android】LayoutInflater.inflate方法的详解及xml根元素的布局参数不起作用的问题 - u011494050的专栏 - 博客频道 - CSDN.NET
- 增加samba用户提示Failed to add entry for user - minenamewj的专栏 - 博客频道 - CSDN.NET
- Python发送WEB请求,并对WEB内容进行解析 - lpxuan151009的专栏 - 博客频道 - CSDN.NET
- 分布式系统全链路监控方案设计 - chenglinhust的专栏 - 博客频道 - CSDN.NET
- 字典树(前缀树)的应用 - 乖兔子的专栏 - 博客频道 - CSDN.NET
- Qtwebkit配置,设置交叉编译环境 - croop520的专栏 - 博客频道 - CSDN.NET