寫一個密碼預設星號，但可以檢視密碼的輸入框

王铁柱6發表於2024-12-10
密碼
<!DOCTYPE html>
<html>
<head>
<title>密碼輸入框</title>
<style>
#password-container {
  position: relative;
}

#show-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
}
</style>
</head>
<body>

<div id="password-container">
  <input type="password" id="password" placeholder="請輸入密碼">
  <span id="show-password">👁️</span> </div>

<script>
const passwordInput = document.getElementById('password');
const showPassword = document.getElementById('show-password');

showPassword.addEventListener('click', () => {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    showPassword.textContent = '⚫'; // 切換到隱藏密碼的圖示
  } else {
    passwordInput.type = 'password';
    showPassword.textContent = '👁️'; // 切換到顯示密碼的圖示
  }
});
</script>

</body>
</html>

程式碼解釋:

  1. HTML 結構:

    • #password-container div 用於包含密碼輸入框和顯示/隱藏按鈕，方便定位。
    • <input type="password" id="password"> 建立密碼輸入框，初始狀態下顯示星號。
    • <span id="show-password">👁️</span> 建立一個顯示/隱藏按鈕，使用眼睛emoji作為圖示。

  2. CSS 樣式:

    • 使用 position: relative 和 position: absolute 將顯示/隱藏按鈕定位到輸入框的右側。
    • transform: translateY(-50%) 垂直居中按鈕。
    • cursor: pointer 使按鈕顯示為指標形狀。
    • user-select: none 防止使用者選中圖示文字。

  3. JavaScript 邏輯:

    • 獲取密碼輸入框和顯示/隱藏按鈕的 DOM 元素。
    • 為顯示/隱藏按鈕新增點選事件監聽器。
    • 在點選事件處理函式中：
      • 判斷 passwordInput.type 的值：
        • 如果是 password，則將其更改為 text，並將按鈕文字更改為 ⚫ (黑色圓圈)，顯示密碼。
        • 如果是 text，則將其更改為 password，並將按鈕文字更改為 👁️ (眼睛)，隱藏密碼。

改進建議:

  • 可訪問性: 為視力障礙使用者新增aria-label屬性，例如：<span id="show-password" aria-label="顯示密碼">👁️</span>。
  • 圖示庫: 使用圖示庫 (例如Font Awesome, Material Icons) 來代替emoji，可以更好地控制圖示樣式和大小。
  • 錯誤處理: 可以新增一些錯誤處理，例如檢查密碼輸入框是否存在。

這個改進版本更簡潔，易於理解和維護，並且提高了程式碼的可訪問性。 選擇你喜歡的圖示即可。 希望這個解釋能幫到你!

相關文章