首页 > 蚂蚁部落 > 正文

动态修改input元素type属性值
2017-12-27 09:19:49   来源:   评论:0 点击:

在一些应用中,动态的修改input元素的type属性是非常好的选择,如果能够真正的实现的话,能够极大提高编码的效率。大家知道密码框的内容并

在一些应用中,动态的修改input元素的type属性是非常好的选择,如果能够真正的实现的话,能够极大提高编码的效率。大家知道密码框的内容并不是以明文显示的,如果想在密码中有提示语言,就不那么便利了,那么可以设想使用动态改变input元素的type属性来实现,先看一段代码:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div{display:none;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("#showPwd").focus(function(){    $(this).attr('type','password');  });}) </script></head><body><input name="pw" type="text" id="showPwd" value="输入密码"/></body></html>

以上代码并不能够实现我们的要求,会出现报错Uncaught Error: type property can't be changed。 

于是我们可以更换一个思路实现此效果,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){   $("#showPwd").focus(function(){    var text_value=$(this).val();    if(text_value==this.defaultValue)     {      $("#showPwd").hide();      $("#pw").show().focus();    }  });  $("#password").blur(function(){    var text_value=$(this).val();    if(text_value=="")     {      $("#showPwd").show();      $("#pw").hide();    }  });}) </script></head><body><input name="password" type="password" id="pw" style="display: none;" /><input type="text" id="showPwd" value="请输入密码" /></body></html>

不过这里不是更换type属性,而是文本框和密码框隐藏和显示的切换。

相关热词搜索:

上一篇:防止鼠标移出移入子元素触发mouseout和mouseover事件
下一篇:var ev=window.event||ev的作用

分享到: 收藏
评论排行