JavaScript实现点击眼部图标短暂闪现密码自动恢复隐藏的实现咨询

• 不需要修改你现有的HTML结构，仅调整点击事件的内部逻辑即可实现目标效果
• 核心实现逻辑拆解：
  • 替换原本的“开关式”三元判断逻辑为强制状态切换，确保每次点击眼睛图标都触发统一的“明文闪现”反馈，不会残留之前的显示状态
  • 点击眼睛图标时，立刻将密码输入框从掩码状态切换为明文，同步切换图标样式
  • 新增延时定时器，在和Win10感知一致的时长（约1.5秒）到点后，自动将输入框切回密码掩码状态、还原默认图标
  • 新增定时器清理逻辑，解决快速连续点击时的状态错乱问题

调整后的完整代码 #

你原本的HTML代码无需改动：

<input type="password">
<i class="far fa-eye"></i>

修改后的JavaScript代码（带新手友好注释）：

// 提前存储定时器引用，方便后续清理
let showPwdTimer = null;
let inputObj = document.querySelector("input");
let iObj = document.querySelector("i");

iObj.addEventListener("click", function() {
    // 每次点击触发时，先清除上一次未执行完成的定时器，避免连点bug
    clearTimeout(showPwdTimer);

    // 立刻将输入框切换为明文显示
    inputObj.type = "text";
    // 同步更新图标为“正在显示明文”的斜眼样式
    iObj.classList.add("fa-eye-slash");
    iObj.classList.remove("fa-eye");

    // 启动新的定时器，1.5秒后自动切回掩码状态
    showPwdTimer = setTimeout(() => {
        inputObj.type = "password";
        // 还原默认的睁眼图标
        iObj.classList.remove("fa-eye-slash");
        iObj.classList.add("fa-eye");
    }, 1500); // 括号里的1500是明文展示的时长，单位为毫秒，可自行调整
})

新手避坑提示 #

• 必须加clearTimeout逻辑：如果省略这步，快速连续点击眼睛图标时，上一次设置的倒计时会提前触发密码隐藏，出现刚点完就马上切回掩码的异常效果
• 展示时长无需硬卡数值：1500ms是参考Win10系统的感知时长，可根据自身需求调整为1000ms-2000ms区间内的任意值
• 这套实现完全基于你目前学习阶段接触的DOM属性操作、事件绑定、原生定时器API，不需要引入额外依赖或复杂语法

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