html密码显示与隐藏
时间: 2023-09-13 17:10:18 浏览: 92
您可以使用HTML和JavaScript来实现密码的显示与隐藏。一种常见的方法是使用“checkbox”元素和“onchange”事件来切换输入字段的“type”属性。您可以尝试以下代码:
```
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="checkbox" id="showPassword" onchange="togglePasswordVisibility()">Show password
<script>
function togglePasswordVisibility() {
var passwordInput = document.getElementById("password");
var showPasswordCheckbox = document.getElementById("showPassword");
if (showPasswordCheckbox.checked) {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
}
</script>
```
此代码创建一个标签和一个密码输入字段,并在其旁边添加一个复选框。当复选框被选中时,“togglePasswordVisibility”函数将被调用,它将检查复选框的状态并相应地更改密码输入字段的“type”属性。如果复选框被选中,则密码将以文本形式显示,否则将以密码形式显示。
相关推荐
![](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)
![](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)