直接改input.type会导致密码内容视觉消失，因浏览器重置控件状态；正确做法是切换前缓存value、切换后立即赋值并focus，且必须同步更新aria-pressed以保障无障碍。

直接改 input.type 是可行的，但不加保护会丢值、失焦、无障碍失效——尤其在 Safari 和部分安卓 WebView 中。

为什么切 type 后密码内容消失了

浏览器对 type="password" 的处理是渲染层掩码，不是删值；但切换回 password 时，旧版 Safari 或某些 WebView 会重置 input.value。这不是 bug，是历史兼容行为。

• 必须在切换前读取 input.value，存到变量里
• 切换 input.type 后，立刻重新赋值 input.value = currentValue（哪怕值没变）
• 不能用 setAttribute('type', 'text')：它触发两次 DOM 更新，更易清空值
• React/Vue 中避免用 v-model 或 value 受控绑定后还手动改 type，会引发 diff 冲突

移动端软键盘和焦点问题怎么处理

iOS Safari 切换后可能延迟响应 focus，Android Chrome 可能不自动切出数字键盘——光靠 type 切换不够。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 切换后必须调用 input.focus()
• 为防 Safari 延迟，加 setTimeout(() => input.focus(), 0) 兜底
• 同步设置 input.inputmode = isShow ? 'text' : 'verbatim'，引导键盘类型
• 禁用 autocomplete：设 input.autocomplete = 'off'，否则 Chrome 可能在 type="text" 时拒绝填充密码管理器

无障碍和语义化必须补哪些属性

仅视觉切换不等于可访问。屏幕阅读器需要明确知道这是密码字段、当前是否可见、按钮是否已按下。

立即学习“前端免费学习笔记（深入）”；

• input 加 aria-label="密码，点击按钮可显示" 或 aria-labelledby 指向按钮
• 切换按钮加 aria-pressed="true"/"false"，并随状态实时更新
• 按钮需有 aria-controls="pwd-input-id"，建立控制关系
• 避免双 input 方案：两个密码框同时存在会导致屏幕阅读器重复播报、tabindex 错乱、状态同步复杂

最易被忽略的是：value 手动恢复和 aria-pressed 同步——前者导致 Safari 下值丢失，后者让视障用户完全无法感知当前状态。这两个动作不是“可选优化”，而是功能成立的前提。