JavaScript密码框实现（可切换）

最新推荐文章于 2024-05-09 11:08:12 发布

Shirley7627

最新推荐文章于 2024-05-09 11:08:12 发布

阅读量733

点赞数 17

分类专栏： HTML JavaScript 文章标签： css css3 前端 javascript vscode html

本文链接：https://blog.csdn.net/MiraitowaL/article/details/134490725

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

效果如图

这里主要是三个要点：

1.input输入框的密码（password）和文本（text）的切换

2.眼睛图片的点击切换

3.输入时密码提示文字上移，失去失去焦点时下移

部分代码如下：

这是对网页内容的定义

<div class="mi-form">
      <div class="mi-control">
        <input type="password" class="mi-input" />
        <label>密码</label>
      </div>
      <div class="mi-password"></div>
    </div>

内容样式

 <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>

接下来是重点！！！关于效果的书写，

<script>
      // 对要变换效果的地方进行定义，方便后面使用
      let inputEle = document.querySelector("input");  //密码输入框
      let labelEle = document.querySelector("label");  //密码提示文字
      let miEle = document.querySelector(".mi-password");  //眼睛图片
      // 密码提示文字效果
      inputEle.addEventListener("focus", function () {
        labelEle.classList.add("active");
      });
      inputEle.addEventListener("blur", function () {
        if (inputEle == null) {
          labelEle.classList.remove("active");
        }
      });
      // 密码文字和眼睛图片切换
      miEle.addEventListener("click", function () {
        inputEle.type == "text";
        if (inputEle.type == "text") {
          inputEle.type = "password";
        } else {
          inputEle.type = "text";
        }
        miEle.classList.toggle("active");
      });
    </script>

// 密码提示文字效果

inputEle.addEventListener("focus", function () {

labelEle.classList.add("active");

});

inputEle.addEventListener("blur", function () {

if (inputEle == null) {

labelEle.classList.remove("active");

}

});

这里当输入框有焦点时，密码提示文字执行active的效果，在样式的.mi-control label.active中，当失去焦点且文本框为空时，移除active效果，恢复到最开始的样子

// 密码文字和眼睛图片切换

miEle.addEventListener("click", function () {

inputEle.type == "text";

if (inputEle.type == "text") {

inputEle.type = "password";

} else {

inputEle.type = "text";

}

miEle.classList.toggle("active");

});

这里当眼睛图片被点击，先把输入框的type属性赋值为text文本类型（因为默认是password类型，且眼睛图片最开始为闭眼），然后用if else，当为text文本型就赋值为password型，当为password型就赋值为text文本型，互相切换。

miEle.classList.toggle("active");

classList.toggle——切换类名如果有这个class类名，则删除，如果没有，则添加。实现眼睛的图片切换（其中active为.mi-password.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 inputEle = document.querySelector("input"); //密码输入框
      let labelEle = document.querySelector("label"); //密码提示文字
      let miEle = document.querySelector(".mi-password"); //眼睛图片
      // 密码提示文字效果
      inputEle.addEventListener("focus", function () {
        labelEle.classList.add("active");
      });
      inputEle.addEventListener("blur", function () {
        if (inputEle == null) {
          labelEle.classList.remove("active");
        }
      });
      // 密码文字和眼睛图片切换
      miEle.addEventListener("click", function () {
        inputEle.type == "text";
        if (inputEle.type == "text") {
          inputEle.type = "password";
        } else {
          inputEle.type = "text";
        }
        miEle.classList.toggle("active");
      });
    </script>
  </body>
</html>

图片