JS登录页面密码的显示与隐藏

一只小丹子

已于 2022-11-15 19:51:20 修改

阅读量446

点赞数

文章标签： javascript 前端 html

于 2022-11-15 19:49:59 首次发布

本文链接：https://blog.csdn.net/m0_58878209/article/details/127872506

版权

这篇博客展示了如何使用HTML、CSS和JavaScript（jQuery库）创建一个简单的交互式密码输入框。当用户点击眼睛图标时，密码会从隐藏（密码类型）变为可见（文本类型），再次点击则恢复为隐藏状态。该功能提高了用户在输入密码时的便利性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="http://code.jquery.com/jquery-latest.js"></script>
       <style>
           .box {
               position: relative;
               width: 400px;
               border-bottom: 1px solid #ccc;
               margin: 100px auto;
           }

           .box input {
               width: 370px;
               height: 30px;
               border: 0;
               outline: none;
           }

           .box img {
               position: absolute;
               top: 10px;
               right: 30px;
               width: 16px;
           }
       </style>

   </head>
   <body>
       <div class="box">
           <label for="">
               <img src="img/闭眼_线.png" / alt="" id="eye">
           </label>
           <input type="password" name="" id="pwd" />
       </div>
       <script>
           //1.获取元素
           var eye = document.getElementById('eye');
           var pwd = document.getElementById('pwd');
           //2.注册事件处理程序
           var flag = 0;
           eye.onclick = function() {
               if (flag == 0) {
                   pwd.type = 'text';
                   eye.src = 'img/睁眼.png';
                   flag = 1; //复制操作
               } else {
                   pwd.type = 'password';
                   eye.src = 'img/闭眼_线.png';
                   flag = 0;
               }
           }
       </script>
   </body>
</html>