直接修改 input.type 是最简方案，但需兼容老浏览器 fallback 至 CSS 遮罩；须保存 value、禁用 autocomplete、避免 DOM 重建导致状态丢失；移动端注意 inputmode 和键盘行为；纯 CSS 方案存在无障碍与兼容性缺陷。
怎么用 button 切换 input[type="password"] 的显示状态
直接改 type 属性是最简单有效的办法，但浏览器不允许动态修改 type（尤其在 IE 和部分旧版 Safari 中会报错或静默失败）。所以得绕开——用两个 input 元素切换显隐，或用 inputmode + autocomplete 配合视觉控制。
推荐做法：保留一个 input，只改它的 type 值，并在不支持的环境里 fallback 到遮罩层模拟（比如用 • 覆盖文字）。
- 必须用
setAttribute('type', 'text')或直接赋值input.type = 'text'，不能靠 class 或 CSS 隐藏内容 - 切换前先保存当前
value，因为某些老浏览器重设type会清空值 - 记得同步设置
input.autocomplete = 'off'，否则 Chrome 可能在type="text"时自动填充密码
为什么点击按钮后密码没变可见，或者输完字全没了
常见原因是没处理好 DOM 更新时机或事件绑定方式。比如用 innerHTML 重建 input 元素，会导致焦点丢失、输入法中断、React/Vue 状态脱钩；又或者在 Vue 的 v-model 绑定下直接改 type，触发了内部 diff 异常。
- React 用户别用
useState控制type字符串再渲染新 input——这会让输入框反复销毁重建，值和光标全丢 - Vue 用户优先用
v-bind:attrs="{ type: isShow ? 'text' : 'password' }"，而不是:type指令（Vue 2 不支持动态type） - 原生 JS 中，确保按钮
click事件监听器是绑定在稳定节点上，不是每次渲染都重新绑
togglePasswordVisibility() 函数该检查哪些兼容性边界
这个函数看似简单，实则要兜住三类问题：老浏览器限制、移动端软键盘行为异常、密码管理器误识别。Chrome 会把 type="text" 的密码字段当成普通文本框，可能禁用密码保存提示；iOS Safari 在 type 切换后可能不自动唤起数字键盘。
立即学习“前端免费学习笔记（深入）”；
- 检测是否支持动态
type：尝试赋值后读回input.type，若仍为'password'就走 CSS 遮罩 fallback - 移动端加
input.inputmode = isShow ? 'text' : 'verbatim'，避免键盘类型错乱 - 不要给
type="text"的密码框设autocomplete="current-password"，否则 1Password 等工具会拒绝填充
用 CSS 实现“伪可见”时容易漏掉的细节
当 JS 无法安全切 type（如某些 WebView 或低版本 Android），就得用纯 CSS 方案：保持 type="password"，但用 ::after 叠加明文、或用 text-security 控制圆点样式。但这招在 Safari 上基本无效，且无障碍支持极差。
-
text-security: none是非标准属性，仅 Firefox 支持，Chrome/Edge 完全忽略 - 用绝对定位盖一层
span显示明文？必须监听input事件同步更新，且要处理复制粘贴、选中、光标位置等 - 所有 CSS 方案都会让屏幕阅读器读出明文，违反 WCAG 保密要求——真要合规，必须用真实
type切换
最麻烦的其实是 iOS 键盘：切到 type="text" 后，如果之前是密码键盘，它不会自动切回来；用户手动切键盘类型后，再切回 password，键盘又卡在字母模式。这事没法用 CSS 或 JS 完全修，只能接受。
