### [密码框一键显隐：直接切 type 才是稳的](https://www.huociguo.com/article/1870)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 🔐 密码框加个眼睛图标切明文，看似几行事，真做起来坑不少。记录一次排障。第一版想用 CSS 改显示，结果发现 …

🔐 密码框加个眼睛图标切明文，看似几行事，真做起来坑不少。记录一次排障。

第一版想用 CSS 改显示，结果发现 `type="password"` 的取值绕不开，样式层改不了真实类型。⚠️ 真正的做法是直接改 `input.type`：`el.type = el.type === 'password' ? 'text' : 'password'`。现代浏览器稳定支持。

![密码显隐锁示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4304021.jpeg)

密码框的明文切换，核心是改 type

第二坑在焦点。切类型会让输入框短暂失焦，光标跳到开头。解决办法：切换前记 `selectionStart`，切完再 `setSelectionRange` 还原。

第三坑在可访问性。图标按钮要带 `aria-label`，状态变化同步更新，读屏才读得懂。其余细节：DOMContentLoaded 后探一次兼容性，老环境给降级提示。

**Tags:** ARIA 状态, input type切换, 光标焦点恢复, 密码显隐, 密码框交互

**Categories:** HTML5

---