javascript 显示隐藏密码案例

周百万.

已于 2022-05-06 08:57:20 修改

阅读量514

点赞数 1

于 2022-05-06 08:56:21 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/124602152

版权

密码输入视觉反馈小眼睛效果图片切换前端交互

关键词由CSDN通过智能技术生成

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

javascript

28 篇文章 2 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

效果图：

这是显示密码，有个睁开的小眼睛

这是密码框，有个不让观看的小眼睛

核心思路：

绑定小眼睛的img和input

点击img时，有点击触发事件，让密码框变成文本框，图片换成睁开的眼睛

再次点击img时，又有点击触发事件，文本框让变成密码框，图片换成闭上的眼睛

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div,
        input {
            box-sizing: border-box;
        }
        
        .box {
            margin-top: 100px;
            margin-left: 200px;
            width: 410px;
            border-bottom: 1px solid #ccc;
        }
        
        input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        img {
            width: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="password" name="" id="input">
        <img src="images/eye3.jpg" alt="">
    </div>
    <script>
        // 获取元素
        var input = document.querySelector('#input');
        var img = document.querySelector('img');
        // 注册事件  处理程序
        var flag = 0;
        img.onclick = function() {
            if (flag == 0) {
                input.type = 'text';
                this.src = 'images/eye4.jpg';
                flag = 1;
            } else if (flag == 1) {
                input.type = 'password';
                this.src = 'images/eye3.jpg';
                flag = 0;
            }
        }
    </script>