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中文網其他相關文章！