显示隐藏密码--JS案例

最新推荐文章于 2022-10-11 16:51:30 发布

奇葩之小王子

最新推荐文章于 2022-10-11 16:51:30 发布

阅读量179

点赞数

文章标签： css js html

本文链接：https://blog.csdn.net/qq_52138438/article/details/114982128

版权

显示隐藏密码–JS案例

<!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>
    <link rel="stylesheet" href="./font_2368962_3yxu32fsuq3/iconfont.css">
    <style>
        .box{
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for=""></label>
        <input type="password" name="" id="pwd">
        <span class="iconfont" id="ico">&#xe612;</span>
    </div>
    <script>
        //1.获取元素
        var eye = document.getElementById('ico');
        var pwd = document.getElementById('pwd');
        //2.注册事件 处理程序
        var flag = 0;
        ico.onclick = function(){
            if(flag == 0)
            {
                pwd.type = 'text';
                ico.innerHTML = '&#xe60c;';
                flag = 1; 
            }else{
                pwd.type = 'password';
                ico.innerHTML = '&#xe612;';
                flag = 0;
            }
            
        }
    </script>
</body>
</html>

利用点击事件,修改input的输入方式,同时根据flag判断是隐藏还是显示

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
显示隐藏密码--JS案例

显示隐藏密码–JS案例<!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"> <
复制链接

扫一扫