首頁 > web前端 > js教程 > JavaScript如何實現密碼可見性切換(顯示與隱藏)

JavaScript如何實現密碼可見性切換(顯示與隱藏)

云罗郡主
發布: 2018-11-27 15:54:44
轉載
3954 人瀏覽過

這篇文章帶給大家的內容是關於JavaScript如何實現密碼可見性切換(顯示和隱藏),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

JavaScript如何實現密碼可見性切換(顯示與隱藏)

前端密碼可見性切換(顯示與隱藏)效果,大家估計都看過,所以就不多說了。

預設情況下,輸入的密碼的 input 標籤 type="password",預設密碼以小點或星號表示。要密碼可見所以我們需要將type修改為"text"。在 Chrome、FireFox 等瀏覽器中透過修改 input 標籤的 type 屬性輕鬆實現該效果,但是 IE 下就會報錯。如果你需要相容IE,就必須考慮其他方案。

這裡有幾點需要說明的是:

範例使用了替換整個input 標籤方案,所以可以相容IE

眼睛的圖表使用了iconfont ,這樣使用CSS切換比較簡單。

在IE10 瀏覽器中,遇到密碼輸入框的時候,框內會自行顯示一個小眼睛的圖標,點擊後也能顯示密碼,如果是普通文字輸入框,則IE10會自動顯示一個小叉,點擊後可以清空文字方塊已輸入的內容,如果不要IE10自帶的這兩個功能生效,可以在CSS裡加入:

CSS 代碼:

input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}
登入後複製

這兩個針對IE瀏覽器的CSS定義便可去掉IE瀏覽器自動顯示的文字清除和顯示密碼的功能。

以上就是對JavaScript如何實現密碼可見性切換(顯示和隱藏)的全部介紹,如果您想了解更多有關JavaScript教程,請關注PHP中文網。


以上是JavaScript如何實現密碼可見性切換(顯示與隱藏)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:css88.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板