js实现密码输入框切换显示和隐藏
时间: 2024-02-22 22:00:01 浏览: 38
是的,可以使用JavaScript来实现密码输入框的切换显示和隐藏。可以通过改变输入框的type属性值来实现。当type属性的值为“password”时,输入框中输入的内容会被隐藏;当type属性的值为“text”时,输入框中输入的内容会被显示。
以下是一个示例代码,可以参考:
HTML部分:
```
<input type="password" id="passwordInput">
<button onclick="togglePassword()">显示/隐藏</button>
```
JavaScript部分:
```
function togglePassword() {
var passwordInput = document.getElementById("passwordInput");
if (passwordInput.type === "password") {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
}
```
在上面的代码中,我们首先获取了输入密码的输入框,并且定义了一个函数togglePassword()。当点击“显示/隐藏”按钮时,就会调用此函数。在函数中,我们判断当前输入框的type属性值,如果是“password”,则将其改为“text”,否则将其改为“password”,从而实现切换显示和隐藏密码的效果。
相关问题
js实现显示和隐藏密码
好的,以下是一个简单的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`属性,从而实现密码的显示和隐藏。
其他两个input标签实现切换密码显示和隐藏示例
好的,这是一个示例:
```html
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button id="toggle-password">Show/Hide Password</button>
<script>
const passwordInput = document.getElementById('password');
const toggleBtn = document.getElementById('toggle-password');
toggleBtn.addEventListener('click', () => {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleBtn.textContent = 'Hide Password';
} else {
passwordInput.type = 'password';
toggleBtn.textContent = 'Show Password';
}
});
</script>
```
这个示例中,我们创建了一个标签为“Password”的标签和一个密码输入框。同时,我们还创建了一个按钮,用于切换密码输入框的显示和隐藏。
在JavaScript代码中,我们首先获取密码输入框和切换按钮的引用,然后通过`addEventListener()`方法监听按钮的`click`事件。当按钮被点击时,我们检查密码输入框的类型,如果它是`password`类型,则将其类型更改为`text`以显示密码,并将按钮的文本更改为“Hide Password”。如果密码输入框的类型已经是`text`,则将其类型更改回`password`以隐藏密码,并将按钮的文本更改为“Show Password”。