当前位置:主页 > JavsScript库 > 表单 >

JavaScript中显示和隐藏密码按钮
栏目分类:表单   发布日期:2021-09-16   浏览次数:

一个超小型的 JS 库,可以通过一个按钮来切换用户输入的密码字符串的可见性。

如何使用它:

1. 在密码字段旁边创建一个密码可见性切换按钮,如下所示:

<!-- 密码字段-->
<input type="password" id="password" placeholder="输入密码" required>
<!-- 切换按钮 -->
<button id="button" value="显示密码">显示密码</button>

2. 将密码字段的'type' 属性更改为'text',以便您可以以纯文本形式检索密码字符串。

//Get the Button By Id
var button = document.getElementById("button");
//Get the Password Input By Id
var password = document.getElementById("password");
 
button.onclick = function() {
    //Check if the input is Empty
    if (password.value.trim().length === 0) {
        //Show alert 
        alert("密码不必为空")
    } else if (button.textContent == "显示密码") {
        //Show Password
        password.setAttribute('type', 'text');
        //Chnage the text of the button
        button.textContent = "隐藏密码";
        //change the color of button to Red
        button.classList.remove('btn-primary');
        button.classList.add('btn-danger');
    } else {
        //Hide Password
        password.setAttribute('type', 'password');
        //Chnage the text of the button
        button.textContent = "显示密码";
        //change the color of button to Blue
        button.classList.remove('btn-danger');
        button.classList.add('btn-primary');
    }
}

官方网站:https://github.com/tahiriabdo131/Show-and-Hide-password

相关热词: 密码

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库