JavaScript實(shí)現(xiàn)密碼可見(jiàn)性切換的方法

這篇文章給大家分享的是有關(guān)JavaScript實(shí)現(xiàn)密碼可見(jiàn)性切換的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

前端密碼可見(jiàn)性切換（顯示和隱藏）效果，大家估計(jì)都見(jiàn)過(guò)，所以就不多說(shuō)了。

默認(rèn)情況下，輸入的密碼的 input 標(biāo)簽 type="password"，默認(rèn)密碼用小點(diǎn)或星號(hào)表示。要密碼可見(jiàn)所以我們需要將type修改為"text"。在 Chrome、FireFox 等瀏覽器中通過(guò)修改 input 標(biāo)簽的 type 屬性輕松實(shí)現(xiàn)該效果，但是 IE 下就會(huì)報(bào)錯(cuò)。如果你需要兼容IE，就必須考慮其他方案。

這里有幾點(diǎn)需要說(shuō)明的是：

示例使用了替換整個(gè) input 標(biāo)簽方案，所以可以兼容IE

眼睛的圖表使用了 iconfont ，這樣使用CSS切換比較簡(jiǎn)單。

在 IE10 +瀏覽器中，遇到密碼輸入框的時(shí)候，框內(nèi)會(huì)自行顯示一個(gè)小眼睛的圖標(biāo)，點(diǎn)擊后也能顯示密碼，如果是普通文本輸入框，則IE10會(huì)自動(dòng)顯示一個(gè)小叉，點(diǎn)擊后可以清空文本框已輸入的內(nèi)容，如果不想要IE10自帶的這兩個(gè)功能生效，可以在CSS里加入：

CSS 代碼：

input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

這兩個(gè)針對(duì)IE瀏覽器的CSS定義便可去掉IE瀏覽器自動(dòng)顯示的文本清除和顯示密碼的功能。

感謝各位的閱讀！關(guān)于JavaScript實(shí)現(xiàn)密碼可見(jiàn)性切換的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！