如何点击img标签实现密码输入框密码显示/隐藏切换功能

开发者阿泽

2026-8-26

密码框明文/密文切换实现方法

核心逻辑：点击眼睛图标时，同步切换密码输入框的type属性值、切换对应状态的眼睛图标即可，不需要改动现有DOM结构。

前置准备

你现有Eye-slash.svg是密码隐藏（密文）状态的斜杠眼睛图标，额外准备一张无斜杠的睁眼图标（示例命名为Eye.svg），对应密码明文显示状态即可。

代码实现

HTML（无需调整原有结构，仅补全图标alt属性更规范）

<label for="password-input" class="password-container">
    <input class="main-input" id="password-input" type="password" minlength="8" title="Must contain at least 8 or more characters" placeholder="رمز عبور" required>
    <img class="password-show-icon" src="Eye-slash.svg" alt="切换密码显示状态">
</label>

可选CSS优化

你已经完成了图标在输入框内的定位，只需要额外加一行鼠标手型样式，提升交互感知：

.password-show-icon {
    /* 原有定位样式保留，追加下方样式 */
    cursor: pointer;
}

JS交互逻辑

把下方代码放到页面DOM加载完成后执行即可：

// 获取对应DOM节点
const passwordInput = document.getElementById('password-input');
const togglePwdIcon = document.querySelector('.password-show-icon');

// 绑定图标点击事件
togglePwdIcon.addEventListener('click', function(e) {
    // 阻止label默认关联触发行为，避免异常聚焦问题
    e.preventDefault();
    // 校验当前密码是否为隐藏状态
    const isPwdHidden = passwordInput.type === 'password';
    // 切换输入框type：隐藏时切为text明文显示，显示时切回password密文隐藏
    passwordInput.type = isPwdHidden ? 'text' : 'password';
    // 同步切换图标，注意将Eye.svg替换为你自己的睁眼图标实际路径
    togglePwdIcon.src = isPwdHidden ? 'Eye.svg' : 'Eye-slash.svg';
});