password Microsoft Edge 的輸入類型包含密碼揭露按鈕。 為了確保密碼輸入正確,使用者可以點擊 密碼揭露 按鈕或按 Alt+F8,以顯示密碼欄位中的字元。 你可以移除密碼揭露的控制,或自訂控制樣式。
預設情況下, 密碼揭露 按鈕是關閉的,因此 在密碼 欄位中,使用者輸入的字元會被點取代。 密碼揭露按鈕出現在密碼欄位右側,以眼睛形狀的圖示呈現:
當使用者點擊密碼 揭露 按鈕開啟時,密碼文字會顯示,眼睛圖示上方會變成斜線:
預設情況下,密碼揭露按鈕會插入所有設定type為 "password"的 HTML input 元素的 Shadow DOM 中。 從 Microsoft Edge 87 版本開始,使用者或 企業 可全域關閉此功能。 網頁設計師和開發者應該預期大多數 Microsoft Edge 用戶會使用預設的體驗。
移除密碼揭露控制
作為網頁作者,你可以完全移除 密碼揭露 按鈕,方法是針對 ::-ms-reveal 偽元素:
::-ms-reveal {
display: none;
}
不過,你應該考慮利用 密碼揭露 按鈕。 原生 密碼揭露 按鈕內建了重要的 安全措施 。
自訂操作風格
你可以不完全移除控制,而是修改 密碼揭露 按鈕的樣式,使其更符合網站的視覺語言。 以下摘錄提供了此類風格的範例:
::-ms-reveal {
border: 1px solid transparent;
border-radius: 50%;
box-shadow: 0 0 3px currentColor;
}
在 設定密碼揭露 按鈕時,請留意以下幾點:
眼睛圖示作為背景影像實作。 若要在 密碼揭露 按鈕上加入背景色,請使用 CSS
background-color屬性而非background速寫屬性。你可以調整 密碼揭露 按鈕的大小和比例。
注意事項
瀏覽器會隱藏超出密碼輸入控制範圍的溢位。
目前,沒有狀態選擇器可用來樣式化密碼 揭露 按鈕的切換狀態。
控制的可見性
密碼揭露按鈕在使用者輸入密碼欄位文字前無法使用。 為了保護使用者的密碼輸入安全,瀏覽器會在以下情境下抑制該按鈕:
如果焦點從 密碼 欄位移開,瀏覽器會移除 密碼顯示 按鈕。
如果腳本修改 了密碼 欄位,瀏覽器會移除 密碼顯示 按鈕。
若密碼 揭露 按鈕被移除,使用者必須刪除 密碼 欄位的內容,才能讓 密碼揭露 按鈕再次出現。 這種行為防止使用者在離開解鎖裝置時,對密碼做些微調整來顯示密碼。
如果密碼欄位被密碼管理器自動填入,密碼揭露按鈕將無法使用。