jQuery attr()实现改变密码显示状态报错的处理。

最新推荐文章于 2024-04-23 15:57:32 发布

转载最新推荐文章于 2024-04-23 15:57:32 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kingchan/p/7477927.html

文章标签：

#javascript #ViewUI

本文探讨了如何在前端实现用户密码输入可见性的切换功能。通过对比使用jQuery的attr()方法和prop()方法，发现prop()方法能更有效地实现需求。文章还提供了一种使用两个input元素进行切换的替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求，

这种需求我们肯定会想到只要动态改变input的type属性不就好了（text显示/password隐藏）：

于是我用了jQuery的attr（）这个方法。

代码如下：

$(input).attr("type","password");

然而结果并不是我想的那样，出错了！

浏览器报错信息为：“Uncaught Error: type property can't be changed”！

大概意思是input的type类型属性不能改变。

。。。。。。查阅各种质料也看到各种解决方法，大体上都是如下这种的写法：

<input id="showPwd" class="txt" type="text" value="密码" tabindex="2" />  
<input id="pwd" class="txt" name="password" type="password" /> 
var showPwd = $("#showPwd"), pwd = $("#pwd");  
showPwd.focus(function(){  
   pwd.show().focus();  
   showPwd.hide();  
});  
  
pwd.blur(function(){  
   if(pwd.val()=="") {  
       showPwd.show();  
       pwd.hide();  
    }  
});

简单来说就是用两个input来回切换着显示，互相获取对方输入的字符！
这种办法我试了一手，可以实现，而且代码也不是很多。但是我总觉得怪怪的，这种需求应该这么实现？肯定不可能啊
本人认为这个功能不应该那样麻烦。为了追求真理，本人不懈努力。。。。

然后。。。。

$(input).prop("type","password");//简单粗暴的实现了

感谢谢阅读！！

转载于:https://www.cnblogs.com/kingchan/p/7477927.html