火次果
火次果

暂无菜单项

首页/文章/技术文章/web前端/HTML5/
打开 MD 链接

密码框一键显隐:直接切 type 才是稳的

发布于 1天前
3

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

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

密码显隐锁示意
密码框的明文切换,核心是改 type

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

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

常见问题(FAQ)

用 CSS 改明文可行吗
不行。type 决定真实类型,样式层改不了,必须改 input.type 才能切明文。
切换会丢光标吗
会。切类型触发失焦,需先存 selectionStart,切完用 setSelectionRange 还原。
图标按钮要 aria 吗
要。图标按钮带 aria-label 且随状态更新,读屏才能识别当前是显示还是隐藏。
老浏览器兼容吗
现代浏览器稳定支持,老环境应在加载后探测并给出降级提示。
用 text 加样式伪装行吗
不安全。真实值仍明文存于 DOM,直接切 type 更稳妥可控。
ARIA 状态input type切换光标焦点恢复密码显隐密码框交互
支持作者
如果这篇内容对你有帮助,可以请作者喝杯咖啡
0 点赞
0 收藏
分享
0 讨论
反馈
0 / 600
细中粗
0 讨论
热门最新
总结
暂无总结
嗨,下午好!
所有的成功,都源自一个勇敢的开始
创作
社区
购物
会员
近期热门

暂无数据

火次果
火次果
首页
资迅中心
小店
AI导航
社区
所有的成功,都源自一个勇敢的开始
不辜负每一个勇敢的开始
关于FAQ协议
火次果 © 2026鲁ICP备2025164830号-1