要實現密碼可見的功能,可以在輸入密碼的地方添加一個按鈕,用戶點擊按鈕時可以切換密碼的可見狀態。當按鈕處于可見狀態時,用戶輸入的密碼會顯示為明文;當按鈕處于隱藏狀態時,用戶輸入的密碼會顯示為密文。
以下是一個簡單的示例代碼,演示如何實現密碼可見的功能:
HTML部分:
<input type="password" id="passwordInput" />
<button id="showPasswordBtn">顯示密碼</button>
JavaScript部分:
const passwordInput = document.getElementById('passwordInput');
const showPasswordBtn = document.getElementById('showPasswordBtn');
showPasswordBtn.addEventListener('click', function() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
showPasswordBtn.textContent = '隱藏密碼';
} else {
passwordInput.type = 'password';
showPasswordBtn.textContent = '顯示密碼';
}
});
以上代碼中,當用戶點擊“顯示密碼”按鈕時,會切換密碼輸入框的類型(從password
到text
或從text
到password
),并更新按鈕的文本內容(顯示密碼/隱藏密碼)來提示用戶當前密碼的可見狀態。