如何解决重新点击密码框时密码可见按钮不显示的问题？

问题原因 #

你遇到的问题核心是：没有给密码输入框绑定重新获取焦点时的显示逻辑，同时缺少对按钮状态的合理管理——切换到其他字段后按钮被隐藏，但再次点击密码框时，没有触发按钮重新显示的逻辑。

完整代码实现 #

调整后的HTML

<div class="pass">
  <label for="myPass">Password: </label>
  <input type="password" name="myPass" id="myPass" placeholder="Enter your Password" required>
  <!-- 添加密码切换按钮，默认隐藏 -->
  <button id="togglePass" type="button" style="display: none;">👁️</button>
</div>

优化后的CSS

.pass {
  /* 让元素横向排列对齐 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pass ::placeholder {
  text-align: center;
}

#myPass {
  width: 15rem;
  border-radius: 5px;
  border-color: #725E54;
  /* 加内边距让按钮和输入框高度匹配 */
  padding: 0.3rem;
}

#togglePass {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
}

核心JavaScript逻辑

const passwordInput = document.getElementById('myPass');
const toggleBtn = document.getElementById('togglePass');
let isBtnClicked = false;

// 密码框获取焦点时：如果已有内容，显示切换按钮
passwordInput.addEventListener('focus', () => {
  if (passwordInput.value.length > 0) {
    toggleBtn.style.display = 'inline-block';
  }
});

// 密码框失去焦点时：延迟隐藏按钮（避免点击按钮时直接消失）
passwordInput.addEventListener('blur', () => {
  setTimeout(() => {
    if (!isBtnClicked) {
      toggleBtn.style.display = 'none';
      // 切回密码隐藏状态
      passwordInput.type = 'password';
    }
    isBtnClicked = false; // 重置点击状态
  }, 200);
});

// 点击按钮切换密码显示/隐藏状态
toggleBtn.addEventListener('click', () => {
  isBtnClicked = true;
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    toggleBtn.textContent = '🙈';
  } else {
    passwordInput.type = 'password';
    toggleBtn.textContent = '👁️';
  }
});

// 输入内容时：有焦点且有内容就显示按钮，内容清空则隐藏
passwordInput.addEventListener('input', () => {
  if (passwordInput === document.activeElement && passwordInput.value.length > 0) {
    toggleBtn.style.display = 'inline-block';
  } else if (passwordInput.value.length === 0) {
    toggleBtn.style.display = 'none';
  }
});

关键逻辑解释 #

1. 焦点重新获取触发显示：通过focus事件监听，每次点击密码框时，只要输入框里有内容，就会自动显示切换按钮，解决了"再次点击不出现按钮"的问题。
2. 延迟隐藏避免冲突：用setTimeout延迟200毫秒隐藏按钮，是因为点击按钮时会先触发输入框的blur事件，延迟能让按钮的点击逻辑先执行，不会出现"刚点按钮就消失"的情况。
3. 输入状态联动：input事件确保输入内容时自动显示按钮，清空内容时自动隐藏，符合用户直觉。
4. 状态标记管理：isBtnClicked变量用来标记是否点击了按钮，避免密码框失去焦点时，误隐藏正在操作的按钮。

内容的提问来源于stack exchange，提问作者Henilkumar Patel