html+css+简单JavaScript实现密码框显示与隐藏字符串

最新推荐文章于 2024-05-16 13:41:41 发布

百事可樂@

最新推荐文章于 2024-05-16 13:41:41 发布

阅读量988

点赞数 1

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

本文链接：https://blog.csdn.net/qq_53756771/article/details/128287067

版权

前端专栏收录该内容

7 篇文章 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>
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="./font_mt98e4mi2q/iconfont.css">
    <style>
        /* 写一些基本样式 */
        
        .box {
            margin: auto;
            margin-top: 200px;
            width: 500px;
            height: 30px;
            border-bottom: 1px solid #333;
        }
        
        input {
            width: 440px;
            border: none;
            /* 不让输入框的边框出现 */
        }
        
        input:focus {
            outline: none;
            /* 点击后没有黑框框出现 */
        }
        
        #eye {
            cursor: pointer;
            /* 改变鼠标样式 */
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="password" name="请输入密码" id="pwd">
        <i class="iconfont icon-bukejian" id="eye"></i>
        <!-- 运用了iconfont的相关知识  如果不懂点击下面链接了解 -->
    </div>
    <script>
        var pwd = document.getElementById('pwd');
        var eye = document.getElementById('eye');
        var flag = 0;
        eye.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
                eye.setAttribute('class', 'iconfont icon-kejian') //改变eye的css样式使其睁眼和闭眼
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.setAttribute('class', 'iconfont icon-bukejian') //改变eye的css样式使其睁眼和闭眼
                flag = 0;
            }
        }
    </script>
</body>

</html>

字体图标相关知识： html字体图标的使用_百事可樂@的博客-CSDN博客

写完之后忽然发现microsoft edge有自带的显示与隐藏效果哈哈哈哈哈哈