如何使用 JavaScript 切換密碼可見性

密碼字段通過顯示星號 (* ) 字符而不是實際字符。

但是，某些用戶可能會鍵入錯誤的密碼。為避免此類錯誤，您可以允許用戶切換密碼的可見性以查看他們當前正在輸入的內容。

要使密碼對用戶可見，只需按照以下步驟操作：

1. 創建一個<input> password 類型的字段 和一個 <button> 將用於在單擊時切換密碼的可見性。
2. 向click添加事件監聽器 按鈕的事件。
3. 點擊按鈕時，切換type text 之間密碼字段的屬性 和 password . <input> text 類型的字段 將顯示實際密碼。

讓我們假設您有以下兩個元素——一個密碼元素和一個用於切換密碼可見性的按鈕：

<input type="password" id="password" placeholder="Enter password">
<button id="toggle">Show</button>

要切換密碼的可見性，首先使用 querySelector() 選擇按鈕和密碼輸入字段 方法：

const password = document.querySelector('#password');
const btn = document.querySelector('#toggle');

接下來，將事件偵聽器附加到 click 按鈕的事件並切換 type text 之間密碼字段的屬性 和 password ：

btn.addEventListener('click', () => {
    const type = password.type;

    // Toggle between `text` and `password`
    if (type === 'text') {
        password.type = 'password';
    } else {
        password.type = 'text';
    }
});

而已。您已經完成了密碼可見性的切換。