为什么隐藏和显示密码功能无法正常工作？

Question

我只是想在我的登录表单中添加一个显示密码的功能。我尝试了几种方法，但仍然无法正常工作。我不明白为什么会这样。谁能帮帮我？

$(".toggle-password").click(function() {
  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

/**function showPwd(id, el) {
  let x = document.getElementById(id);
  if (x.type === "password") {
     x.type = "text";
     el.className = 'fas fa-eye-slash toggle-password';
} else {
    x.type = "password";
    el.className = 'fas fa-eye toggle-password';
    }
}**/

/**const togglePassword = document.querySelector('.toggle-password');
  const password = document.querySelector('#password-field');
  togglePassword.addEventListener('click', function (e) {
  // toggle the type attribute
  const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
  password.setAttribute('type', type);
  // toggle the eye / eye slash icon
  this.classList.toggle('fa-eye');
});**/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="#" method="post">
  <input id="password-field" type="password" name="Password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required="***" />
  <span toggle="#password-field" class="fas fa-eye-slash fa-eye field-icon toggle-password 
      hidepass">
    </span>
</form>

我也尝试了两种不同的方法，我在脚本中注释了它以使其工作，但这些也不起作用。请有人帮忙。here is the image

Answer 1

切换主类会删除单击它的能力，因此添加一个使用opacity 隐藏它的类，使其仍可单击。

$(".toggle-password").click(function() {
  $(this).toggleClass("hidden");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

.hidden {
  opacity: 0.2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post">
  <input id="password-field" type="password" name="Password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required="***" />
  <span toggle="#password-field" class="fas fa-eye-slash fa-eye field-icon toggle-password 
  hidepass">
</span>
</form>