案例：js实现密码的显示与隐藏

神经质土豆

已于 2022-10-05 20:17:31 修改

阅读量1.6k

点赞数

分类专栏： js案例文章标签： javascript html 前端

于 2022-10-05 20:17:15 首次发布

本文链接：https://blog.csdn.net/m0_65085680/article/details/127176341

版权

js案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<代码演示>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            margin: 100px auto;
            border-bottom: 1px solid #333;
            position: relative;
        }

        #pwd {
            outline: none;
            /*获得焦点时 外边框 无  */
            border: 0;
            /* 外边框 无 */
            width: 370px;
            height: 30px;
            line-height: 30;
        }

        #eye {
            position: absolute;
            right: 2px;
            top: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="password" id="pwd">
        <label for="">
            <img src="https://img-blog.csdnimg.cn/20200927154818954.png" id="eye">
        </label>
    </div>
    <script>
        // 利用一个变量flag 两种状态  0 表示闭眼睛，不显示密码 ； 1 表示睁开眼睛，显示密码
        // 1.获取元素
        var eye = document.getElementById("eye");
        var input = document.querySelector("#pwd");
        // 2.注册事件 3.处理程序
        var flag = 0;
        eye.onclick=function(){
            if(flag==0){
                input.type="text"//表示此时input的属性变为输入文本，密码输入显示
                eye.src="https://img-blog.csdnimg.cn/20200927154739332.png";
                flag=1;//此时经过点击小眼睛状态变为打开 就表示此时flag的值为1 
            }else{
                input.type="password"//表示此时input的属性变为输入密码，密码输入隐藏
                eye.src="https://img-blog.csdnimg.cn/20200927154818954.png";
                flag=0;

            }
        }



    </script>
</body>

</html>