TypeScript密码可见性切换函数仅生效一次问题求助

数据老陈

2026-6-23

密码可见性切换功能修复方案

你的代码问题出在逻辑顺序错误+未基于当前状态做切换：每次调用函数时，你先强制把输入框设为password、图标设为eye-off，紧接着又判断图标是eye-off就改成eye，相当于每次执行后状态被固定，自然只能生效一次。

修复思路：

先获取目标DOM元素，避免重复查询DOM
根据当前输入框的状态，决定切换方向：
- 如果当前是隐藏状态（输入框type为password），就切换为显示状态
- 如果当前是显示状态，就切换回隐藏状态

修正后的TypeScript代码：

togglePasswordVisibility() {
  // 获取DOM元素并添加类型断言，避免TS类型报错
  const passwordInput = document.querySelector('#input2') as HTMLInputElement;
  const passwordIcon = document.querySelector('#passwordIcon') as SVGElement;

  // 元素不存在时直接返回，避免后续代码报错
  if (!passwordInput || !passwordIcon) return;

  // 根据输入框当前类型判断切换逻辑
  const isHidden = passwordInput.type === 'password';
  
  if (isHidden) {
    // 切换为显示密码状态
    passwordInput.type = 'text';
    passwordIcon.setAttribute('name', 'eye');
  } else {
    // 切换为隐藏密码状态
    passwordInput.type = 'password';
    passwordIcon.setAttribute('name', 'eye-off');
  }
}