真正可用的方案只有两个：双 input 切换，或用 css + inputmode 模拟明文观感，不碰 type；因直接改 input.type 会暴露明文、清空值、丢失光标、破坏无障碍，且 type 是不可变属性，强行赋值可能被忽略或触发异常。
直接改 input.type 从 "password" 切到 "text" 不安全也不可靠——它会让明文在 DOM 中短暂暴露，且在 iOS Safari 旧版本、部分 WebView 中会清空值、丢失光标、破坏无障碍状态。真正可用的方案只有两个：双 input 切换，或用 CSS + inputmode 模拟明文观感，不碰 type。
为什么不能用 input.type = "text" 简单切换
这不是浏览器 bug，而是规范行为：type 是不可变属性，强行赋值可能被忽略、重置值或触发异常。尤其在 iOS Safari ≤15.3、某些 Android WebView 中，input.type = "text" 后 input.value 可能变为空字符串；即使成功，光标也会跳回开头，selectionStart 归零，屏幕阅读器仍播报“密码输入框”，而实际已是明文。
更关键的是：一旦切为 "text"，DOM 中就真实存在明文，DevTools 查看、XSS 注入、辅助工具抓取都可直接读到——这违背了“最小暴露面”原则。
- Chrome/Firefox 虽支持，但行为不一致：Firefox 保留值，Chrome 可能清空
- 必须监听
blur强制切回"password"，否则用户切走页面时密码仍挂着 - 仅靠
onclick切换，无法响应键盘 Enter/Space，不满足 WCAG 2.1
推荐方案一：双 input 元素 + visibility 切换（兼容 IE11 起）
核心是 DOM 层面保留两个 input：<input type="password"> 和 <input type="text">，只控制哪个可见，完全绕过 type 变更带来的状态丢失问题。
实操要点：
- 两个 input 共享同一
name和id（仅一个实际可聚焦），不可见的那个设tabindex="-1" - 用
visibility: hidden，不是display: none——后者会导致表单提交时该字段丢失 - 同步值用
input事件（非change），避免漏掉粘贴、剪切等操作 - 切换焦点时，手动保存并恢复
selectionStart/selectionEnd，否则光标错位 - 按钮必须设
aria-pressed="true/false"并实时更新，同时监听keydown响应 Enter/Space
推荐方案二：不改 type，只用 inputmode + CSS 模拟明文（现代浏览器首选）
保持 input.type === "password" 不变，通过样式和属性微调让用户“感知”明文状态，既规避所有兼容性风险，又杜绝 DOM 明文暴露。
关键动作：
- 点击按钮时，只给 input 添加
class="showing"，不改type - CSS 中用
.showing { font-family: monospace; letter-spacing: 0.05em; }模拟等宽明文观感 - 禁用干扰项：
spellcheck="false" autocapitalize="none" autocomplete="new-password" - 图标用 SVG 或 Unicode（如
"?️"/"?"），避免依赖外部字体或img.src字符串比对 - 按钮
aria-label必须随状态更新，例如从"显示密码"改为"隐藏密码"
容易被忽略的细节：焦点、光标与自动填充
几乎所有失败案例都栽在这三处：光标跳位、焦点丢失、Chrome 拒绝唤出密码管理器。
必须做：
- 切换前记录
input.selectionStart和input.selectionEnd - 切换后立即调用
input.focus()和input.setSelectionRange(start, end)——iOS 上必须在用户手势回调（如onclick）中执行才有效 -
input.autocomplete = "off"无效，应设为"new-password"或"current-password"，否则 Chrome 在type="text"时可能屏蔽密码管理器 - 不要用
setAttribute("type", "text")，Safari 旧版有渲染 bug；必须用属性赋值语法input.type = "text"
最复杂也最容易被跳过的点，其实是失焦处理：用户没点按钮就离开输入框，密码还明文挂着——所以 blur 事件里强制切回 "password" 不是可选项，是必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
