实现步骤

首先，在 HTML 代码中，使用了 input 标签和 type 属性将输入框定义为 password 类型：

<input type="password" id="password-input" class="password-input" placeholder=" ">

然后，使用 CSS 定义了输入框的样式，包括宽度、高度、内边距、字体大小、边框、边框半径、背景色和字体颜色等：

.password-input {
  width: 100%;
  height: 50px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  color: #333;
}

为了在输入框中显示提示文本，使用了 placeholder 属性。同时，使用了伪类 ::placeholder 来定义提示文本的样式，包括字体大小和颜色：

.password-input::placeholder {
  color: #999;
  font-size: 16px;
}

为了在用户输入密码时向上移动输入框的标签，并在输入框获得焦点时改变输入框边框的颜色，使用了以下 CSS：

.password-input:focus,
.password-input:not(:placeholder-shown) {
  outline: none;
  border: 2px solid rgb(51,144,236);
}

.password-input:focus + label,
.password-input:not(:placeholder-shown) + label {
  font-size: 12px;
  top: -8px;
  left: 8px;
  color: rgb(51,144,236);
}

最后，在 JavaScript 中，通过获取输入框的值并将其显示在警告框中来实现提交功能。此外，还使用了事件监听器来实现显示密码按钮的功能：

const passwordInput = document.getElementById("password-input");
const togglePassword = document.getElementById("toggle-password");
const button = document.querySelector(".show-button");

togglePassword.addEventListener("click", function(event) {
  const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
  passwordInput.setAttribute("type", type);
  togglePassword.classList.toggle("fa-eye");
  togglePassword.classList.toggle("fa-eye-slash");
});

button.addEventListener("click", function(event) {
  alert("你输入的密码是：" + passwordInput.value);
});

通过使用 JavaScript 监听输入框中的输入事件，可以实现当用户开始输入密码时显示显示密码按钮和提交按钮的功能。这是通过在事件处理程序中检查输入框的值来实现的：

passwordInput.addEventListener("input", function(event) {
  if (passwordInput.value !== "") {
    togglePassword.style.display = "block";
    button.style.display = "block";
  } else {
    togglePassword.style.display = "none";
    button.style.display = "none";
  }
});

这将根据输入框中的值来显示或隐藏按钮。当用户输入任何字符时，这将被视为输入框中已有值的信号，并显示按钮。如果输入框的值为空，则会隐藏按钮。

完整代码

<!DOCTYPE html>
<html>
  <head>
    <title>输入密码</title>
    <style>
      * {
        box-sizing: border-box;
      }
      
      body {
        font-family: Arial, sans-serif;
        background-color: #ffffff;
      }
      
      h1 {
        text-align: center;
        margin-top: 50px;
        color: #333;
      }
      
      .input-box {
        position: relative;
        width: 300px;
        margin: 50px auto;
      }

      .password-input {
        width: 100%;
        height: 50px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        color: #333;
      }
      
      .password-input::placeholder {
        color: #999;
        font-size: 16px;
      }
      
      .password-input:focus,
      .password-input:not(:placeholder-shown) {
        outline: none;
        border: 2px solid rgb(51,144,236);
      }
      
      .password-input:focus + label,
      .password-input:not(:placeholder-shown) + label {
        font-size: 12px;
        top: -8px;
        left: 8px;
        color: rgb(51,144,236);
      }
      
      label {
        position: absolute;
        top: 14px;
        left: 14px;
        font-size: 16px;
        color: #999;
        transition: all 0.3s;
        background-color: #ffffff;
        pointer-events: none;
      }

      .eye-icon {
        position: absolute;
        top: 16px;
        right: 15px;
        font-size: 16px;
        color: #999;
        cursor: pointer;
      }

      .show-button {
        position: absolute;
        color: white;
        bottom: -75px;
        right: 0px;
        width: 100%;
        height: 50px;
        background-color: rgb(51,144,236);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        display: none;
      }
      
      .show-button:focus {
        outline: none;
      }
      
      .show-button:active {
        transform: translateY(2px);
      }
      
      .show-button i {
        color: #fff;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>请输入密码</h1>
    <div class="input-box">
      <input type="password" id="password-input" class="password-input" placeholder=" ">
      <label for="password-input">输入密码</label>
      <i id="toggle-password" class="eye-icon fa fa-eye-slash" aria-hidden="true"></i>
      <button class="show-button" type="button" title="显示密码" tabindex="-1">下一步</button>

    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script>
      const passwordInput = document.getElementById("password-input");
      const togglePassword = document.getElementById("toggle-password");
      const button = document.querySelector(".show-button");

      togglePassword.addEventListener("click", function(event) {
        const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
        passwordInput.setAttribute("type", type);
        togglePassword.classList.toggle("fa-eye");
        togglePassword.classList.toggle("fa-eye-slash");
      });

      passwordInput.addEventListener("input", function(event) {
        if (passwordInput.value !== "") {
          togglePassword.style.display = "block";
          button.style.display = "block";
        } else {
          togglePassword.style.display = "none";
          button.style.display = "none";
        }
      });

      button.addEventListener("click", function(event) {
        alert("你输入的密码是：" + passwordInput.value);
      });
    </script>
  </body>
</html>

一个模仿Telegram的密码输入框

实现步骤

完整代码

评论 (0)