移动端van-field设置密码显示隐藏
时间: 2023-07-25 08:29:02 浏览: 82
可以使用VanillaJS来实现输入密码框的显示隐藏功能。以下是一个简单的示例代码:
```html
<div>
<input type="password" id="password-input" placeholder="请输入密码">
<button id="toggle-btn">显示/隐藏密码</button>
</div>
```
```javascript
const passwordInput = document.getElementById('password-input');
const toggleBtn = document.getElementById('toggle-btn');
toggleBtn.addEventListener('click', function() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleBtn.textContent = '隐藏密码';
} else {
passwordInput.type = 'password';
toggleBtn.textContent = '显示密码';
}
});
```
在上面的代码中,使用事件监听器来监听“显示/隐藏密码”按钮的点击事件。当按钮被点击时,检查密码输入框的类型。如果类型为“password”,则将其类型更改为“text”,从而显示密码。如果类型为“text”,则将其类型更改为“password”,从而隐藏密码。同时,还要更新按钮的文本内容以反映当前的状态。