首頁 > web前端 > js教程 > 主體

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

高洛峰
發布: 2017-02-11 16:56:57
原創
1405 人瀏覽過

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

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

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

HTML 代碼

Uncaught Error: type property can'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中文網! 🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!