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

密码文本字段在切换显示/隐藏密码按钮时被清除是因为切换按钮的操作导致密码文本字段的值被重置为空。这是由于切换按钮的默认行为是切换密码文本字段的类型，从"password"类型切换为"text"类型，或者反之。当切换为"text"类型时，密码文本字段的值会被清除。

为了解决这个问题，可以使用以下方法之一：

使用JavaScript：通过监听切换按钮的点击事件，切换密码文本字段的类型，并在切换之前将密码文本字段的值保存下来，切换完成后再将值重新赋给密码文本字段。

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);
});

使用CSS：通过使用伪类和伪元素来模拟切换按钮的效果，而不是改变密码文本字段的类型。这样可以避免密码文本字段的值被清除。

<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>

以上是解决密码文本字段在切换显示/隐藏密码按钮时被清除的两种方法。根据具体的需求和使用场景，选择适合的方法来实现密码文本字段的切换功能。