js编写代码,实现一个可以控制密码显示和隐藏的页面
时间: 2024-05-06 13:21:49 浏览: 58
好的,下面是一个简单的示例代码实现密码显示和隐藏的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>密码显示和隐藏</title>
<script>
function togglePassword() {
var passwordInput = document.getElementById("password");
var toggleButton = document.getElementById("toggle");
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleButton.innerText = "隐藏";
} else {
passwordInput.type = "password";
toggleButton.innerText = "显示";
}
}
</script>
</head>
<body>
<label for="password">密码:</label>
<input type="password" id="password">
<button id="toggle" onclick="togglePassword()">显示</button>
</body>
</html>
```
这段代码中,我们通过一个按钮的点击事件来控制密码输入框的`type`属性,从而实现密码的显示和隐藏。如果输入框的`type`为`password`,则密码会被隐藏;如果`type`为`text`,则密码会被显示出来。同时,页面中的按钮的文本也会发生相应的变化。
阅读全文