js点击小眼睛显示隐藏密码框的密码

最新推荐文章于 2023-11-23 13:04:56 发布

爬楼梯的小新

最新推荐文章于 2023-11-23 13:04:56 发布

阅读量2.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_57607714/article/details/120115700

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

该按钮类似于登录页面后面的小眼睛点击显示密码再点击密码变星号

核心思路：把密码框类型改为文本框即可看见里面的密码

利用flag变量判断flag的值如果是1就切换文本框 flag设置为0

如果是0 就切换为密码框 flag设置为1

注：如果有这种按钮随时切换的都可以使用变量flag

<!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>练习</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            border: 1px solid #ccc;
        }
        
        .box input {
            width: 270px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 6px;
            right: 10px;
            width: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="password" id="ipt" />
        <label for="">
        <img src="../img/closed.png" alt="" id="img">
        <lable>
    </div>
</body>
<script>
    var ipt = document.getElementById('ipt');
    var img = document.getElementById('img');
    var flag = 0;
    img.onclick = function() {
        if (flag == 0) {  //判断flag==0
            ipt.type = 'text';
            img.src = '../img/open.png';
            flag = 1; //赋值
        } else {
            ipt.type = 'password';
            img.src = '../img/closed.png';
            flag = 0; //赋值
        }
    }
</script>


</html>