原生HTML+JS实现密码眼睛按钮需三步：改input.type属性切换显示状态、用getAttribute('src')比对并切换SVG图标、切前保存光标位置切后恢复；注意iOS键盘不自动弹出、focus需setTimeout延迟调用、按钮必须为type="button"且用currentColor适配深色模式。
怎么用原生 HTML + JS 实现密码眼睛按钮
纯前端实现密码可见切换，不需要框架，核心就三步：改 type 属性、切图标、同步焦点。关键不是“能不能做”，而是“切 type 后输入框行为是否一致”——比如 type="password" 切成 type="text" 时，iOS 键盘不会自动弹出字母键盘（仍为数字/符号键盘），这是常被忽略的兼容性细节。
实操建议：
- 不要用
input[type="password"]直接套contenteditable或伪元素遮罩，会破坏表单校验和可访问性 - 图标按钮必须用
<button type="button">，否则触发表单提交 - 切换前保存光标位置，切完后手动恢复，否则在中间修改时光标会跳到末尾（尤其 Safari）
- 监听
focus事件比监听点击更可靠，避免用户用 Tab 进入输入框时图标状态不同步
为什么 getAttribute("type") 返回 "password" 但 value 不变
这是常见错觉：你以为 JS 修改了 type，但实际执行了 input.type = "text" 后，input.getAttribute("type") 仍返回旧值，因为 getAttribute 读的是 HTML 属性快照，而 input.type 读的是当前 DOM 属性值。真正影响行为的是后者。
验证方式：
立即学习“前端免费学习笔记（深入）”；
- 用
console.log(input.type)查当前类型（动态值） - 用
console.log(input.getAttribute("type"))查初始声明（静态值） - 若用
setAttribute("type", "text")替代赋值，部分老浏览器（IE11）会直接报错
眼睛图标 SVG 怎么适配深色模式又不闪动
直接内联 SVG 最稳，避免 CSS 切换时重绘导致图标短暂消失。深色模式适配靠 currentColor 和 fill 继承，而不是写死 #000 或 #fff。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
示例最小可行代码：
<button type="button" aria-label="切换密码可见">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 3C4.69 3 2 5.69 2 9s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10.5c-1.75 0-3.17-1.42-3.17-3.17s1.42-3.17 3.17-3.17 3.17 1.42 3.17 3.17-1.42 3.17-3.17 3.17z" fill="currentColor"/>
<path d="M8 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z" fill="currentColor"/>
</svg>
</button>
注意：fill="currentColor" 让 SVG 随父级文本颜色变化，配合 button { color: var(--fg); } 即可响应深色模式，且无重绘延迟。
移动端点击眼睛图标后键盘没反应或失焦怎么办
本质是 iOS Safari 对 type 动态切换的处理缺陷：切到 text 后不自动激活软键盘，且焦点可能丢失。不能靠 input.focus() 硬拉，得加延时 + 强制聚焦。
解决要点：
- 切换
type后，用setTimeout(() => input.focus(), 0)延迟触发（iOS 需要微任务队列清空） - 如果输入框原本没 focus，先
input.focus()再改type，否则 Safari 会忽略后续 focus 调用 - 禁用按钮的默认高亮样式：
button {-webkit-tap-highlight-color: transparent;}，避免点击后视觉卡顿干扰判断 - 别监听
touchstart，用click—— iOS 的 click 事件在 touchend 后 300ms 触发，反而更稳
最麻烦的其实是光标位置维护和 iOS 键盘策略，这两点不处理好，用户会觉得“点了没反应”或“输一半突然跳到末尾”。其他都是样式和语义问题，容易修；但输入体验断层，用户立刻放弃。
