<input type="text" id="newLockText" value="请输入新密码" style="display:block" /> <input type="password" id="newLockPwd" maxlength="6" style="display:block" /> 密码显示隐藏切换
时间: 2023-07-02 09:24:09 浏览: 79
Android文本输入框(EditText)输入密码时显示与隐藏
您可以在切换按钮上添加一个单击事件,该事件将切换密码输入框的类型。以下是示例代码:
```html
<div>
<label for="newLockPwd">新密码:</label>
<input type="text" id="newLockText" value="请输入新密码" style="display:block" />
<input type="password" id="newLockPwd" maxlength="6" style="display:block" />
<button type="button" onclick="togglePassword()">显示/隐藏密码</button>
</div>
```
在上面的代码中,我们创建了一个包含标签、文本输入框、密码输入框和切换按钮的 div 元素。切换按钮的单击事件将调用 togglePassword() 函数。
下面是 togglePassword() 函数的示例代码:
```javascript
function togglePassword() {
var passwordInput = document.getElementById("newLockPwd");
var textInput = document.getElementById("newLockText");
if (passwordInput.type === "password") {
passwordInput.type = "text";
textInput.type = "password";
} else {
passwordInput.type = "password";
textInput.type = "text";
}
}
```
在上面的代码中,我们获取了密码输入框和文本输入框的元素,并检查了密码输入框的类型。如果它是“password”,我们将其类型更改为“text”,这样密码就会被显示出来。我们还将文本输入框的类型更改为“password”,这样用户就无法看到他们所输入的密码。如果它已经是“text”,我们将其类型更改为“password”,这样密码就会被隐藏,并将文本输入框的类型更改为“text”,这样用户可以看到他们所输入的密码。
这就是实现在 div 中切换密码输入框和文本输入框的类型,以便显示或隐藏密码的示例代码。
阅读全文