📅 最后修改于: 2023-12-03 15:23:52.183000 🧑 作者: Mango
在一些网站上，我们会看到一个供用户切换密码可见性的按钮，这个功能可以让用户随时在隐藏密码和显示密码之间切换，方便用户输入。
在本文中，我们将介绍如何使用 HTML 和 JavaScript 实现切换密码可见性功能。
首先，我们需要一个包含密码输入框和切换按钮的 HTML 页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换密码可见性</title>
</head>
<body>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<button id="show-password">显示密码</button>
<script src="index.js"></script>
</body>
</html>
上面代码中，我们使用 input 元素创建了一个密码输入框，并且使用 label 元素为它添加了一个标签。
接着，我们创建了一个 button 元素作为切换按钮，并且通过 id 属性为其命名为 show-password。
最后，我们将 input 元素和 button 元素包含在 body 元素中，并且加载了一个名为 index.js 的 JavaScript 文件。
进入正题，我们首先需要在 JavaScript 文件中获取到密码输入框和切换按钮。
const passwordInput = document.getElementById('password');
const showPasswordButton = document.getElementById('show-password');
上面代码中，我们使用 getElementById 方法获取到了 HTML 中对应的 id 为 password 和 show-password 的元素。
接着，我们需要在按钮被点击时更改密码输入框的类型。具体来说，当密码输入框的类型为 password 时，点击按钮后将密码输入框的类型更改为 text，此时密码内容将显示出来，按钮的文字也应该更改为 隐藏密码；如果输入框的类型为 text 时，点击按钮后将密码输入框的类型更改为 password，此时密码将被隐藏，按钮的文字也应该更改为 显示密码。
showPasswordButton.addEventListener('click', function() {
if(passwordInput.type === 'password') {
passwordInput.type = 'text';
showPasswordButton.textContent = '隐藏密码';
} else {
passwordInput.type = 'password';
showPasswordButton.textContent = '显示密码';
}
});
上面代码中，我们使用 addEventListener 方法为按钮元素添加了一个 click 事件监听器。在监听器函数中，我们使用 if 语句判断密码输入框元素的类型，通过更改 type 属性可以改变输入框的类型。我们还使用 textContent 属性为按钮元素更改了显示的文字。
最后，我们将 JavaScript 文件加载到 HTML 中，这样就可以在页面中实现切换密码可见性的功能了。
<script src="index.js"></script>
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换密码可见性</title>
</head>
<body>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<button id="show-password">显示密码</button>
<script src="index.js"></script>
</body>
</html>
JavaScript 代码：
const passwordInput = document.getElementById('password');
const showPasswordButton = document.getElementById('show-password');
showPasswordButton.addEventListener('click', function() {
if(passwordInput.type === 'password') {
passwordInput.type = 'text';
showPasswordButton.textContent = '隐藏密码';
} else {
passwordInput.type = 'password';
showPasswordButton.textContent = '显示密码';
}
});