显示与隐藏密码

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <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: 2px;
        right: 2px;
        width: 24px;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <label for="">
        <img src="images/close.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. 注册事件 处理程序
      eye.onclick = function () {
        console.log(this); // <img src="images/close.png" alt="" id="eye" />
        if (pwd.type === "password") {
          pwd.type = "text";
          eye.src = "images/open.png";
        } else {
          pwd.type = "password";
          eye.src = "images/close.png";
        }
      };
    </script>
  </body>
</html>
Prev: 设置表单属性 Next: 修改样式属性