JS 模仿显示，隐藏输入密码（input=“ type=“password / text“ “）

揭开画皮

于 2024-05-09 11:08:12 发布

阅读量163

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_75166176/article/details/138605700

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 300px;
            height: 30px;
            margin: 100px auto;
            border-bottom:1px solid;
        }
        .box input{
            width:260px;
             height: 25px; 
            border:none;
            outline:none;

        }
        .box label{
            position:absolute;
            right:0;
            bottom:3px;
        }
        .box label img{

            width:25px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="https://img0.baidu.com/it/u=2028263909,3103172305&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715360400&t=08ce405baf351f4669fb6eccd9968434" alt="" title="隐藏密码">
        </label>
        <input type="password" name="" id="">
    </div>

    <script>
        // 获取元素
        var password = document.querySelector('input');
        var image = document.querySelector('img');
        // 点击事件判断标志
        var flag = 0;
        image.onclick = function(){
            if(flag == 0){
                image.src = 'https://img2.baidu.com/it/u=2014850709,1856367891&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715360400&t=35038c34cff314052fbcaa4a400e0d5b';
                password.type = 'text';
                password.title = '显示密码';
                flag = 1;
            }else{
                image.src = 'https://img0.baidu.com/it/u=2028263909,3103172305&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715360400&t=08ce405baf351f4669fb6eccd9968434';
                password.type = 'password';
                password.title = '隐藏密码';
                flag = 0;
            }

        }
    </script>
</body>
</html>