通过JavaScript实现显示或隐藏密码。使用input表单设置文本域或密码域,使用img标签可以使用属性src设置查看图片和隐藏图片。使用DOM(文档对象模型)绑定img元素后,然后img的onclick点击事件,通过if选择结构,控制显示或隐藏密码。
时间: 2024-03-25 17:37:15 浏览: 121
是的,您说得很对。通过JavaScript可以实现显示或隐藏密码。以下是示例代码:
HTML部分:
```
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<img id="eye" src="show.png" alt="显示密码" onclick="togglePassword()">
```
JavaScript部分:
```
function togglePassword() {
var password = document.getElementById("password");
var eye = document.getElementById("eye");
if (password.type === "password") {
password.type = "text";
eye.src = "hide.png";
eye.alt = "隐藏密码";
} else {
password.type = "password";
eye.src = "show.png";
eye.alt = "显示密码";
}
}
```
这段代码中,我们在input表单中设置了type为password,这样输入的字符就会被隐藏成圆点。然后,我们在img标签中设置了一个id为eye,表示眼睛,用来切换显示或隐藏密码。在JavaScript中,我们通过getElementById方法获取到密码输入框和眼睛图标,然后通过if语句来控制显示或隐藏密码。当点击眼睛图标时,如果密码框的type为password,则将它改为text,同时修改眼睛图标的src和alt属性为隐藏密码的图标和文字;反之,则将密码框的type改回password,同时修改眼睛图标的src和alt属性为显示密码的图标和文字。
阅读全文