密碼揭示輸入的選項

HTML 提供了專門處理密碼的輸入類型：

<input type="password">

使用此類型，輸入時會顯示為模糊的點：

••••••••

這是網頁為了增強安全性而採取的措施。如果沒有此功能，別人很容易通過偷窺來獲取你的密碼。

然而，用戶體驗也在不斷改進，現在通常會提供一個選項：

☑️ 顯示密碼？

這樣用戶可以自行選擇是否顯示密碼。大多數用戶可以在輸入密碼前環顧四周，確認沒有人在偷窺，然後選擇顯示密碼，確保自己正確輸入了密碼，避免因輸錯密碼多次而帶來的困擾。

那麼，該如何實現呢？

方法一：使用JavaScript 切換type="password"和type="text"

這是目前最常用的方法，因為它能夠在所有瀏覽器中正常工作。

 const input = document.querySelector(".password-input");
// 當複選框被選中時...
if (input.getAttribute("type") === "password") {
  input.setAttribute("type", "text");
} else {
  input.setAttribute("type", "password");
}

此方法的問題在於：它需要通過改變輸入類型來實現密碼顯示/隱藏功能，這顯得有些奇怪。更重要的是，它可能會與密碼管理器工具衝突。修改輸入類型可能會導緻密碼管理器（包括瀏覽器內置的密碼管理器）無法識別或自動填充密碼。

方法二：使用CSS 中的-webkit-text-security

這不是一個可行的方案，因為此屬性只在部分瀏覽器中有效。但很明顯，曾經有人希望將此功能遷移到CSS 中，因為它確實在某些瀏覽器中有效。

 input[type="password"] {
  -webkit-text-security: square;
}
form.show-passwords input[type="password"] {
  -webkit-text-security: none;
}

方法三：使用CSS 中的input-security

目前有一個關於input-security的編輯草案規範。它本質上是一個切換值。

 form.show-passwords input[type="password"] {
  input-security: none;
}

這個方法簡潔明了。但目前還沒有瀏覽器支持它。因此，目前我們只能使用方法一。

演示（所有方法）

以上是密碼揭示輸入的選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！