js实现隐藏显示密码文本框

Partiality315

于 2023-02-05 20:54:52 发布

阅读量386

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_62485207/article/details/128893451

版权

思路：

点击显示按钮，将密码框属性修改为文本框，即可看见密码。再次点击按钮切换为密码框。

实现：设置flag变量，通过对flag值的判断，切换属性。

HTML代码

    <h2>账号登录</h2>
    <div class="box">
        <input type="text" value="" placeholder="手机号登陆">
    </div>
    <div class="box pass">
        <label for="">
            <img src="imgs/close.PNG" id="eye-slash" class="eye-slash">
        </label>

        <p class="forget">忘记密码</p>
        </label>
        <input type="password" name="" id="pwd">
    </div>

css布局

        * {
            border: 0;
            margin: 0;
            box-sizing: border-box;
        }
        h2 {
            margin: 5px auto;
            text-align: center;
        }
        .box {
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 10px auto;


        }
        .box input {
            width: 290px;
            height: 30px;
            margin: 5px;
            border: 0;
            outline: none;
            /*祛除蓝色边框*/
        }
        .pass {
            position: relative;
        }
        .eye-slash {
            position: absolute;
            bottom: 12px;
            right: 80px;

            height: 25px;
            border-right: 1px solid;
            padding-right: 8px;
        }
        .forget {
            position: absolute;
            right: 5px;
            bottom: 15px;
            color: gray;

        }

js代码

<script>
        //1.获取元素
        var eye = document.getElementById('eye-slash');
        var pwd = document.getElementById('pwd');
        //2.绑定事件
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'imgs/on.PNG';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = 'imgs/close.PNG';
                flag = 0;
            }

        }
    </script>

效果图