密码文本字段在切换显示/隐藏密码按钮时被清除

var passwordField = document.getElementById("password");
var toggleButton = document.getElementById("toggle");

toggleButton.addEventListener("click", function() {
  if (passwordField.type === "password") {
    passwordField.type = "text";
  } else {
    passwordField.type = "password";
  }
  
  // 保存密码文本字段的值
  var passwordValue = passwordField.value;
  
  // 延迟一段时间后将值重新赋给密码文本字段
  setTimeout(function() {
    passwordField.value = passwordValue;
  }, 100);
});

<style>
  .password-field {
    position: relative;
  }
  
  .password-field input[type="password"] {
    padding-right: 30px;
  }
  
  .password-field .toggle-button {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    cursor: pointer;
  }
  
  .password-field .toggle-button::before {
    content: "Show";
  }
  
  .password-field .toggle-button.hide::before {
    content: "Hide";
  }
</style>

<div class="password-field">
  <input type="password" id="password">
  <span class="toggle-button" onclick="togglePassword()"></span>
</div>

<script>
  function togglePassword() {
    var passwordField = document.getElementById("password");
    var toggleButton = document.querySelector(".toggle-button");
    
    if (passwordField.type === "password") {
      passwordField.type = "text";
      toggleButton.classList.add("hide");
    } else {
      passwordField.type = "password";
      toggleButton.classList.remove("hide");
    }
  }
</script>