📅 最后修改于: 2023-12-03 15:36:29.682000 🧑 作者: Mango
在 Web 应用程序中，密码输入框通常会将用户输入的密码隐藏起来，以确保密码安全。但是，在有些情况下，用户可能希望查看他们输入的密码，JavaScript 就可以很好地满足这一需求。
要显示用户输入的密码，需要使用 JavaScript 来操作密码输入框的 type 属性。该属性用于指定输入框的类型，可以是 text（文本输入框）或 password（密码输入框）。考虑到显示密码只是暂时的，我们需要将密码输入框的类型从 password 改为 text，以显示输入的密码。
const passwordInput = document.getElementById('password');
passwordInput.type = 'text';
在上面的代码中，我们将密码输入框的 type 属性设置为 text，从而显示输入的密码。要将密码输入框的类型改回 password，只需将上面的代码中的 text 改为 password 即可。
将密码输入框的类型从 password 改为 text 可以显示输入的密码，要隐藏密码，只需要将其类型改回 password 即可。但是，在改变密码输入框的 type 属性之前，我们需要先获取输入框中输入的密码，以便在隐藏密码后将其重置回密码输入框中。
const passwordInput = document.getElementById('password');
const password = passwordInput.value;
passwordInput.type = 'password';
passwordInput.value = password;
在上面的代码中，我们先获取了密码输入框中输入的密码，然后将密码输入框的 type 属性设置为 password，最后将输入框的值设置为密码，以便用户重新输入密码。
下面是一个完整的示例，展示了如何使用 JavaScript 显示和隐藏密码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>显示和隐藏密码</title>
</head>
<body>
<form>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</div>
<div>
<button type="button" id="showPassword">显示密码</button>
<button type="button" id="hidePassword">隐藏密码</button>
</div>
</form>
<script>
const passwordInput = document.getElementById('password');
const showPasswordButton = document.getElementById('showPassword');
const hidePasswordButton = document.getElementById('hidePassword');
showPasswordButton.addEventListener('click', () => {
passwordInput.type = 'text';
});
hidePasswordButton.addEventListener('click', () => {
const password = passwordInput.value;
passwordInput.type = 'password';
passwordInput.value = password;
});
</script>
</body>
</html>
上面的示例中，我们创建了一个包含密码输入框和两个按钮的表单。当点击“显示密码”按钮时，密码输入框的类型将变为 text，从而显示输入的密码。当点击“隐藏密码”按钮时，密码输入框的类型将变为 password，从而隐藏密码。注意，在示例中，我们使用 addEventListener 方法为按钮添加了点击事件监听器。