jQuery透過改變input的type屬性實現密碼顯示隱藏切換功能-js教程-PHP中文網

jQuery透過改變input的type屬性實現密碼顯示隱藏切換功能

高洛峰

發布： 2017-02-11 16:56:57

原創

1428 人瀏覽過

一般我們做登入註冊的時候都會提供一個讓使用者選擇自己輸入的密碼是否顯示的需求，

這種需求我們肯定會想到只要動態改變input的type屬性不就好了（text顯示/password隱藏）：

於是我用了$(''#id).attr('type', 'password')這個API 然而結果並不是我想的那樣，出錯了

HTML 代碼

Uncaught Error: type property can&#39;t be changed

登入後複製

HTML 代碼

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

登入後複製

意思大概就是這個屬性不能被修改.

於是我就googl一手.

然而我得到的結果是這樣的

HTML 代碼

rrreee

HTML 代碼

rrreee

就是用兩個input來回切換著顯示，互相取得對方輸入的字元！

這種辦法我試了一手，可以實現，而且程式碼也不是很多。但我總覺得怪怪的，這種需求該這麼實現？肯定不可能啊

一般這種情況我都會去看看大廠是不是這麼做的，而且某些大廠並不是這麼做的！ 🎜🎜但是Google都搜不到我的問題，應該是沒有解決方法了吧！ 🎜🎜🎜以上所述是小編給大家介紹的jQuery透過改變input的type屬性實現密碼顯示隱藏切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！ 🎜🎜更多jQuery透過改變input的type屬性實現密碼顯示隱藏切換功能相關文章請關注PHP中文網！ 🎜