JavaScript练习——密码框的显示与隐藏

落凡尘༣

已于 2023-12-03 16:28:50 修改

阅读量1.6k

点赞数

文章标签： javascript 开发语言 html5 css3

于 2023-11-23 13:04:56 首次发布

本文链接：https://blog.csdn.net/m0_65290003/article/details/134572442

版权

JavaScript练习——密码框的显示与隐藏

文章目录

JavaScript练习——密码框的显示与隐藏
一、展示效果
二、思路分析
三、实现步骤
四、完整代码
五、总结

一、展示效果

在这里插入图片描述

需求分析：

获得焦点之后，密码两个字会动画到上侧
失去焦点之后，如果表单内容为空，则密码两个字复原为原来位置
点击之后是睁开眼睛图片，则可以看到密码
点击之后是闭上眼睛图片，则看不到密码

二、思路分析

1、当焦点放到密码输入框时，通过CSS的transition将“密码”二字移动到输入框的上侧。

2、当用户将焦点从密码输入框移开，如果输入框内没有任何内容（即没有输入任何字符），通过JavaScript来监听输入框的blur事件，当事件触发时，检查输入框的值是否为空，如果为空，则将“密码”二字复原到原来的位置。

3、在输入框内一个眼睛的图标，当用户点击时，密码输入框内的内容会显示出来，以便用户核对。当再次点击时，隐藏密码。这一步可以通过监听图片的点击事件，当点击事件触发时，切换密码输入框的type属性。如果原来是“password”，则设置为“text”，反之则设置为“password”。

三、实现步骤

1、设置CSS样式。

<style>
      .mi-form {
        display: table;
        width: 356px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0);
        background-color: #f9f9f9;
      }

      .mi-control {
        position: relative;
        display: table-cell;
        width: 294px;
      }

      .mi-input {
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        border: 0;
        padding: 30px 20px 10px;
        outline: none;
        background: none;
        appearance: none;
        font-size: 17px;
        font-family: "Noto Color Emoji";
        color: #333;
        line-height: 20px;
      }

      .mi-control label {
        user-select: none;
        position: absolute;
        top: 20px;
        left: 20px;
        height: 20px;
        font-weight: 400;
        font-size: 17px;
        color: rgba(0, 0, 0, 0.4);
        line-height: 20px;
        transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
          font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1),
          color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .mi-control label.active {
        top: 6px;
        font-size: 12px;
        color: #aaa;
      }

      .mi-password {
        display: table-cell;
        width: 60px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        vertical-align: middle;
        background: url(./images/close.png) center/30px 30px no-repeat;
        cursor: pointer;
        /* 防止选中文字 防止点击选中文本框的文字 */
        user-select: none;
      }

      .mi-password.active {
        background-image: url(./images/open.png);
      }
    </style>

2、查询元素：通过 document.querySelector 方法查询页面上的 input 元素和 label 元素，并将它们分别赋值给变量 mi 和 label。

let mi = document.querySelector("input");
let label = document.querySelector("label");

3、添加输入框焦点事件监听：当输入框获得焦点时，会给标签添加一个名为 active 的 CSS 类。这通常用于改变标签的样式，以提示用户输入框已获得焦点。

mi.addEventListener("focus", function () {
        label.classList.add("active");
      });

4、添加输入框失焦事件监听：当输入框失去焦点时（点击输入框外的其他区域），如果输入框的值为空字符串，就从标签中移除 active 类。这通常用于重置标签的样式。

mi.addEventListener("blur", function () {
        if (this.value == "") {
          label.classList.remove("active");
        }
      });

5、添加密码切换功能事件监听：通过 document.querySelector(“.mi-password”) 查询具有类名为 mi-password 的元素，当该元素被点击时，会检查 input 元素的类型，如果是 “text”，则将其改为 “password” 类型，使输入框的内容被隐藏；如果类型已经是 “password”，则将其改为 “text” 类型，使输入框的内容可见。

document
        .querySelector(".mi-password")
        .addEventListener("click", function () {
          if (mi.type == "text") {
            mi.type = "password";
          } else {
            mi.type = "text";
          }
          this.classList.toggle("active");
        });

四、完整代码

<!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>
      .mi-form {
        display: table;
        width: 356px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0);
        background-color: #f9f9f9;
      }

      .mi-control {
        position: relative;
        display: table-cell;
        width: 294px;
      }

      .mi-input {
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        border: 0;
        padding: 30px 20px 10px;
        outline: none;
        background: none;
        appearance: none;
        font-size: 17px;
        font-family: "Noto Color Emoji";
        color: #333;
        line-height: 20px;
      }

      .mi-control label {
        user-select: none;
        position: absolute;
        top: 20px;
        left: 20px;
        height: 20px;
        font-weight: 400;
        font-size: 17px;
        color: rgba(0, 0, 0, 0.4);
        line-height: 20px;
        transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
          font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1),
          color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .mi-control label.active {
        top: 6px;
        font-size: 12px;
        color: #aaa;
      }

      .mi-password {
        display: table-cell;
        width: 60px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        vertical-align: middle;
        background: url(./images/close.png) center/30px 30px no-repeat;
        cursor: pointer;
        /* 防止选中文字 防止点击选中文本框的文字 */
        user-select: none;
      }

      .mi-password.active {
        background-image: url(./images/open.png);
      }
    </style>
  </head>

  <body>
    <div class="mi-form">
      <div class="mi-control">
        <input type="password" class="mi-input" />
        <label>密码</label>
      </div>
      <div class="mi-password"></div>
    </div>
    <script>
      let mi = document.querySelector("input");
      let label = document.querySelector("label");
      mi.addEventListener("focus", function () {
        label.classList.add("active");
      });
      mi.addEventListener("blur", function () {
        if (this.value == "") {
          label.classList.remove("active");
        }
      });
      document
        .querySelector(".mi-password")
        .addEventListener("click", function () {
          if (mi.type == "text") {
            mi.type = "password";
          } else {
            mi.type = "text";
          }
          this.classList.toggle("active");
        });
    </script>
  </body>
</html>

五、总结

1、通过 document.querySelector，选取页面上的输入框元素（input）和标签元素（label）。

2、为输入框元素添加两个事件监听器：一个用于处理获取焦点（focus）事件，另一个用于处理失去焦点（blur）事件。

当输入框获取焦点时，为标签元素添加 active 类。
当输入框失去焦点，并且输入框内没有内容时，移除标签元素的 active 类。

3、为密码图标（.mi-password）添加一个点击事件监听器，用于处理点击事件。

当密码图标被点击时，检查输入框的类型。如果输入框的类型是 text，则将其改为 password；否则，将其改为 text。这样就可以在明文密码和掩码密码之间进行切换。
同时，根据输入框的类型，切换密码图标的 active 类。

落凡尘༣

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习——密码框的显示与隐藏

1、通过 document.querySelector，选取页面上的输入框元素（input）和标签元素（label）。2、为输入框元素添加两个事件监听器：一个用于处理获取焦点（focus）事件，另一个用于处理失去焦点（blur）事件。当输入框获取焦点时，为标签元素添加 active 类。当输入框失去焦点，并且输入框内没有内容时，移除标签元素的 active 类。3、为密码图标（.mi-password）添加一个点击事件监听器，用于处理点击事件。当密码图标被点击时，检查输入框的类型。
复制链接

扫一扫