点击隐藏密码按钮,让input框,隐藏输入内容,按钮变为显示密码
时间: 2023-08-18 17:10:54 浏览: 51
要实现点击隐藏密码按钮后,让输入框隐藏输入内容并将按钮文本变为显示密码,可以使用以下代码:
```javascript
// 获取隐藏密码按钮和密码输入框
const toggleBtn = document.getElementById('toggleBtn');
const passwordInput = document.getElementById('passwordInput');
// 设置隐藏密码按钮的初始文本为"隐藏密码"
toggleBtn.textContent = "隐藏密码";
// 添加点击事件监听器
toggleBtn.addEventListener('click', function() {
if (passwordInput.type === 'password') {
// 如果输入框类型是密码,则将类型改为文本,显示密码内容
passwordInput.type = 'text';
toggleBtn.textContent = "隐藏密码";
} else {
// 如果输入框类型是文本,则将类型改为密码,隐藏密码内容
passwordInput.type = 'password';
toggleBtn.textContent = "显示密码";
}
});
```
这段代码会获取隐藏密码按钮和密码输入框,然后为按钮添加点击事件监听器。当点击按钮时,会检查输入框的类型是密码还是文本。如果是密码,则将输入框类型改为文本,显示密码内容,并将按钮文本改为"隐藏密码"。如果是文本,则将输入框类型改为密码,隐藏输入内容,并将按钮文本改为"显示密码"。请确保在页面加载完成后调用这段代码,并根据实际情况修改按钮和输入框的 ID。