js实现显示和隐藏密码
时间: 2024-03-25 13:41:49 浏览: 33
好的,以下是一个简单的JS实现显示和隐藏密码的示例代码:
HTML代码:
```html
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="checkbox" id="showPassword" onchange="togglePasswordVisibility()">
<label for="showPassword">Show password</label>
```
JS代码:
```javascript
function togglePasswordVisibility() {
var passwordInput = document.getElementById("password");
var showPasswordCheckbox = document.getElementById("showPassword");
if (showPasswordCheckbox.checked) {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
}
```
这段代码中,我们在HTML中定义了一个密码输入框和一个复选框,复选框用于切换密码的可见性。JS中定义了一个函数`togglePasswordVisibility`,当复选框状态改变时调用该函数,根据复选框的状态来动态修改密码输入框的`type`属性,从而实现密码的显示和隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)