input密码框获取焦点时，通过小眼睛展示密码

当 input 密码框获取焦点时，我们可以通过添加一个小眼睛图标，来实现展示密码的功能。以下是一种实现方式：

HTML代码：

<label for="password">密码：</label>
<div class="password-wrapper">
  <input type="password" id="password" name="password">
  <i class="password-toggle-icon fas fa-eye"></i>
</div>

CSS代码：

.password-wrapper {
  position: relative;
}

.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

JavaScript代码：

const passwordInput = document.getElementById("password");
const passwordToggleIcon = document.querySelector(".password-toggle-icon");

passwordToggleIcon.addEventListener("click", function() {
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    passwordToggleIcon.classList.remove("fa-eye");
    passwordToggleIcon.classList.add("fa-eye-slash");
  } else {
    passwordInput.type = "password";
    passwordToggleIcon.classList.remove("fa-eye-slash");
    passwordToggleIcon.classList.add("fa-eye");
  }
});

passwordInput.addEventListener("focus", function() {
  passwordToggleIcon.style.display = "block";
});

passwordInput.addEventListener("blur", function() {
  passwordToggleIcon.style.display = "none";
});

这段代码中，我们首先在密码输入框的外层包裹了一个 div 容器，并在其中添加了一个小眼睛图标。然后，我们给小眼睛图标添加了点击事件监听器，当点击小眼睛图标时，会切换密码输入框的 type 属性，并改变小眼睛图标的样式以反映当前的密码显示状态。

为了在合适的时机显示/隐藏小眼睛图标，我们给密码输入框添加了 focus 和 blur 事件监听器。当密码输入框获取焦点时，我们显示小眼睛图标；当密码输入框失去焦点时，我们隐藏小眼睛图标。

需要注意的是，这段代码中用到了 Font Awesome 图标库中的图标，需要在 HTML 中引入对应的 CSS 文件。