今天在寫注冊頁面的時候發(fā)現(xiàn)一個奇怪的現(xiàn)象，在input框中輸入密碼之后會在后面出現(xiàn)一個眼睛圖標(biāo)（我并沒有寫這個功能）。點擊圖標(biāo)之后會顯示input框中的密碼，再次點擊會繼續(xù)隱藏input框中的密碼。密碼顯示按鈕可協(xié)助用戶確認(rèn)輸入內(nèi)容，避免出現(xiàn)密碼輸入錯誤。但是這個密碼顯示按鈕只會在開始輸入的時候才會顯示，當(dāng)鼠標(biāo)離開輸入框之后就會自動隱藏。再次聚焦輸入框輸入時不會再次顯示，需要刪除輸入內(nèi)容之后再次輸入才會觸發(fā)密碼顯示按鈕。這個用戶體驗并不怎么友好，而且換chrome瀏覽器測試時又沒有（郁悶…?。?。
發(fā)現(xiàn)問題
通過對多款瀏覽器的測試發(fā)現(xiàn)這種現(xiàn)象主要在IE、Edge和IE兼容模式中出現(xiàn)，Chrome、FireFox、Opera、Safari等瀏覽器都沒有出現(xiàn)。后來在網(wǎng)上查了下都說是微軟為了增強用戶在觸控屏幕上使用瀏覽器的體驗對用戶輸入操作做了優(yōu)化，為 <input>標(biāo)簽提供了快速清除鈕( type=”text”出現(xiàn)X圖標(biāo)，IE有，Edge沒有)和密碼文字顯示鈕( type=”password”出現(xiàn)小眼睛圖標(biāo)，IE、Edge都有)的功能。但是這個體驗并不怎么友好， 而且如果我們在項目中已經(jīng)設(shè)計了密碼查看模式就會與瀏覽器默認(rèn)圖標(biāo)重疊。
禁用input自帶圖標(biāo)
主流的瀏覽器的種類很多，我們當(dāng)然希望統(tǒng)一設(shè)計風(fēng)格。所以通常密碼查看功能我們會在項目中自行開發(fā)，微軟這個功能對我們來說反而會出現(xiàn)沖突，是否可以關(guān)閉這個功能呢？還好微軟在為其瀏覽器添加該功能的同時也提供了對應(yīng)的CSS私有屬性，通過CSS的雙偽類就可以將input自帶圖標(biāo)清除。目前只有IE瀏覽器支持此雙偽類，所以不指定input也可以實現(xiàn)。
/*清除text文本輸入框的清除圖標(biāo)*/
input::-ms-clear{
display: none;
}
/*清除password密碼輸入框的明文圖標(biāo)*/
input::-ms-reveal{
display: none;
}
//-------------- 或者 -------------
::-ms-clear, ::-ms-reveal{display: none;}版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至2705686032@qq.com 舉報，一經(jīng)查實，本站將立刻刪除。原文轉(zhuǎn)載： 原文出處：
