帮我做一下这个题目通过JavaScript实现显示或隐藏密码,使input表单设置文本 域或密码域,使用img标签可以使用属性SrC设置查看图片和隐藏图 片,使DoM(文档对象模型)绑定img元素后,然后inmg的onclick 点击事件,通过f选择结构,控制显示或隐藏密码。
时间: 2024-03-20 21:41:41 浏览: 59
js实现input密码框显示/隐藏功能
5星 · 资源好评率100%
好的,我可以帮你完成这道题目。以下是完整的代码:
HTML部分:
```
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<img id="togglePwd" src="showPwd.png" alt="显示密码">
```
JavaScript部分:
```
var togglePwdImg = document.getElementById("togglePwd");
var pwdInput = document.getElementById("password");
togglePwdImg.addEventListener("click", function() {
if (pwdInput.type === "password") {
pwdInput.type = "text";
togglePwdImg.src = "hidePwd.png";
} else {
pwdInput.type = "password";
togglePwdImg.src = "showPwd.png";
}
});
```
在这个示例中,我们首先使用DOM获取img元素和密码输入框元素。然后,我们使用addEventListener()方法将点击事件绑定到img元素上。
点击事件的处理函数中,我们检查密码输入框的类型,如果是password类型,则将其切换为text类型,并将img元素的src属性设置为显示密码的图片路径。如果是text类型,则将其切换为password类型,并将img元素的src属性设置为隐藏密码的图片路径。
这样,当用户单击img元素时,就会切换密码输入框的显示或隐藏,并相应地更改img元素的src属性。
阅读全文