如何通过点击切换密码可见性并同步更新眼睛图标_网络技术

如何通过点击切换密码可见性并同步更新眼睛图标

发布时间 - 2026-01-07 00:00:00 点击率：次

切换密码可见性并同步更新眼睛图标 " />

本文详解 javascript 中因 `img.src` 返回绝对路径导致图片切换失效的问题，提供使用 `getattribute('src')` 获取原始相对路径的正确方案，并附带健壮性优化与完整可运行示例。

在 Web 表单中，实现“密码可见/隐藏”功能时，常需同步切换输入框类型（type="password" ↔ type="text"）和眼睛图标（如 eye.png ↔ eyec.png）。但初学者常遇到图标不切换的问题——表面看逻辑正确，实则源于对 DOM 属性 src 的误解。

元素的 .src 属性返回的是浏览器解析后的完整绝对 URL（例如 file:///C:/project/eye.png 或 https://example.com/eye.png），而非 HTML 中写的相对路径 eye.png。因此，直接用 == "eye.png" 比较必然失败。

✅ 正确做法是使用 element.getAttribute('src')，它精准返回 HTML 标签中声明的原始字符串值：

function fun1() {
  const eyeImg = document.getElementById("eye");
  const currentSrc = eyeImg.getAttribute("src");

  if (currentSrc === "eyec.png") {
    eyeImg.src = "eye.png";
  } else if (currentSrc === "eye.png") {
    eyeImg.src = "eyec.png";
  }
}

⚠️ 更进一步，建议增强代码鲁棒性：

使用严格相等 === 替代 ==；
添加默认 fallback，避免因初始路径异常导致逻辑中断；
合并两个函数逻辑，提升可维护性。

优化后的完整函数如下：

function togglePasswordVisibility() {
  const passwordInput = document.getElementById("password");
  const eyeImg = document.getElementById("eye");

  // 切换输入框类型
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    eyeImg.src = "eyec.png"; // 显示明文时显示“睁眼”图标
  } else {
    passwordInput.type = "password";
    eyeImg.src = "eye.png"; // 隐藏时显示“闭眼”图标
  }
}

对应 HTML 中只需绑定一次事件：


  Password:

  
  
    @@##@@

? 注意事项：

确保 eye.png 和 eyec.png 文件存在于与 HTML 同级目录，或按实际路径调整；
若使用构建工具（如 Webpack/Vite），静态资源路径可能需通过 public/ 或 assets/ 引用，此时应统一使用 import 或环境变量处理；
推荐为眼睛图标添加 cursor: pointer CSS 样式，提升用户可感知性；
生产环境中建议增加 aria-label 和 role="button"，保障无障碍访问。

该方案简洁、可靠，彻底规避了路径解析差异带来的陷阱，是前端表单交互中的典型最佳实践。

# css # javascript # word # java # html # 前端 # vite # 浏览器 # 工具 # 环境变量

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Python 多进程并行化实战：突破 GIL 限制，高效利用

下一篇：windows电脑桌面卡死怎么办

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Python 多进程并行化实战：突破 GIL 限制，高效利用

下一篇：windows电脑桌面卡死怎么办

如何通过点击 切换密码可见性并同步更新眼睛图标

如何通过点击切换密码可见性并同步更新眼睛图标