两个input标签实现切换密码显示和隐藏
时间: 2023-12-23 17:04:06 浏览: 97
jQuery通过改变input的type属性实现密码显示隐藏切换功能
可以通过JavaScript来实现两个`input`标签之间的切换,一个用于输入密码,另一个用于显示/隐藏密码。
以下是一个示例代码,可以参考:
HTML部分:
```
<label for="password">密码</label>
<input type="password" id="password">
<label for="showPassword">显示密码</label>
<input type="checkbox" id="showPassword" onchange="togglePassword()">
```
JavaScript部分:
```
function togglePassword() {
var passwordInput = document.getElementById("password");
var showPasswordInput = document.getElementById("showPassword");
if (showPasswordInput.checked) {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
}
```
在上面的代码中,我们首先获取了输入密码的`input`标签和显示/隐藏密码的`input`标签,并且定义了一个函数`togglePassword()`。当点击显示/隐藏密码的`input`标签时,就会调用此函数。在函数中,我们判断显示/隐藏密码的`input`标签是否被选中,如果被选中,则将输入密码的`input`标签的type属性值改为“text”,否则将其改为“password”,从而实现切换显示和隐藏密码的效果。
阅读全文