如何保存密码显示/隐藏点击事件状态，实现按钮功能切换？

我来帮你搞定这个密码切换的小问题！你的现有代码只实现了单向显示密码的逻辑，没有处理状态回退和图标切换，咱们一步步把它完善好：

核心问题分析 #

你当前的代码里，每次点击都把eye_button_checked设为true，没法实现状态翻转；同时也没处理Font Awesome图标的类名切换，所以看起来功能不完整。

修正后的完整实现 #

首先保留你原有的HTML结构（它的布局是没问题的）：

<div class="input-group"> 
  <input type="password" value="test value" name="password" id="id_password" class="form-control" placeholder="Password"> 
  <span id="show_password" title="Click here to show/hide password" class="input-group-addon" style="cursor: pointer;">
    <i id="button-eye" class="fa fa-eye"></i>
  </span> 
</div>

然后替换成这段JavaScript代码，就能实现完整的双向切换功能：

// 获取页面元素
const eyeButton = document.querySelector('#button-eye');
const passwordInput = document.querySelector('#id_password');

// 初始化状态：默认密码是隐藏的，所以标记为false
let isPasswordVisible = false;

eyeButton.addEventListener('click', function() {
  // 每次点击翻转状态
  isPasswordVisible = !isPasswordVisible;
  
  // 根据状态切换输入框的类型
  passwordInput.type = isPasswordVisible ? 'text' : 'password';
  
  // 切换Font Awesome图标类：自动添加/移除对应的类
  eyeButton.classList.toggle('fa-eye');
  eyeButton.classList.toggle('fa-eye-slash');
});

代码解释 #

• 状态管理：用isPasswordVisible变量保存当前密码的显示状态，初始值设为false（对应默认隐藏密码），每次点击按钮就取反这个变量，实现状态的双向切换。
• 输入框类型切换：用三元运算符根据状态值，把输入框的type在text和password之间切换。
• 图标切换：使用classList.toggle()方法，自动切换fa-eye和fa-eye-slash类，这样点击时图标会同步变化，用户体验更直观。

这样修改后，每次点击眼睛按钮，密码会在显示/隐藏之间切换，图标也会跟着改变，状态也能正确保存啦！

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