jQuery 如何通过点击眼睛图标来展示和隐藏密码

在本文中，我们将介绍如何使用jQuery来实现通过点击眼睛图标展示和隐藏密码的功能。展示和隐藏密码是一个常见的用户体验优化，可以让用户在输入密码时确认输入是否正确。下面我们将分步骤详细介绍。

步骤一：创建HTML结构

首先，我们需要创建一个简单的HTML结构来展示密码输入框和眼睛图标。代码如下：

<input type="password" id="password" placeholder="请输入密码">
<i id="toggle-password" class="fa fa-eye"></i>

在上面的代码中，我们创建了一个密码输入框和一个拥有”fa-eye”样式的眼睛图标。密码输入框的id为”password”，眼睛图标的id为”toggle-password”。

步骤二：编写jQuery代码

接下来，我们需要使用jQuery来编写代码，实现通过点击眼睛图标展示和隐藏密码的功能。代码如下：

$(document).ready(function(){
  $("#toggle-password").click(function(){
    var passwordInput = $("#password");
    var passwordIcon = $(this);

    if (passwordInput.attr("type") === "password") {
      passwordInput.attr("type", "text");
      passwordIcon.removeClass("fa-eye").addClass("fa-eye-slash");
    } else {
      passwordInput.attr("type", "password");
      passwordIcon.removeClass("fa-eye-slash").addClass("fa-eye");
    }
  });
});

在上面的代码中，我们使用了$(document).ready来确保页面完全加载后再执行jQuery代码。然后，我们将点击事件绑定到id为”toggle-password”的眼睛图标上。当用户点击眼睛图标时，我们通过切换密码输入框的type属性来实现密码的展示和隐藏，同时切换眼睛图标的样式。

步骤三：引入FontAwesome库

在上面的代码中，我们使用了FontAwesome库中的图标样式来展示眼睛图标。所以我们需要在HTML中引入FontAwesome库。可以通过以下CDN链接引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

示例说明

现在我们来使用上述代码的示例说明如何通过点击眼睛图标展示和隐藏密码。

首先，当页面加载完成后，密码输入框默认为密码类型，即显示为圆点。当用户单击眼睛图标时，密码输入框将切换为文本类型，即显示为明文密码。同时，眼睛图标将变为斜线图标，表示密码是可见的。再次单击图标时，密码输入框又将切换为密码类型，并将眼睛图标恢复为初始状态。

下面是一段详细的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Show and Hide Password</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .fa-eye-slash:before {
      content: "\f070";
    }
  </style>
</head>
<body>
  <input type="password" id="password" placeholder="请输入密码">
  <i id="toggle-password" class="fa fa-eye"></i>

  <script>
    (document).ready(function(){("#toggle-password").click(function(){
        var passwordInput = ("#password");
        var passwordIcon =(this);

        if (passwordInput.attr("type") === "password") {
          passwordInput.attr("type", "text");
          passwordIcon.removeClass("fa-eye").addClass("fa-eye-slash");
        } else {
          passwordInput.attr("type", "password");
          passwordIcon.removeClass("fa-eye-slash").addClass("fa-eye");
        }
      });
    });
  </script>
</body>
</html>