应避免直接修改密码框type属性，改用双input切换或缓存光标位置；框架中需通过ref/useState控制，禁用时不可修改；字体异常需指定系统字体；iOS需在click同步执行focus。
密码框 type 切换后光标丢失或值清空
直接改 input 元素的 type 属性（比如从 "password" 切成 "text"）在多数浏览器里会触发重置行为：光标跳到开头、选中状态丢失，有些旧版 Safari 甚至会清空 value。这不是 bug，是规范允许的行为——type 属于不可动态安全变更的属性之一。
实操建议：
- 不要直接操作
type，用两个input元素并存 +display: none切换，共享同一个value和事件监听器 - 如果坚持单元素方案，切换前先缓存
input.value和input.selectionStart/input.selectionEnd，切完再手动恢复 - 注意 Chrome 120+ 对
type动态修改加了更严格的限制，强制重置时不再保留输入法状态，中文输入可能中断
点击切换按钮没反应或报错 Failed to set the 'type' property
这个错误通常出现在使用 Vue/React 等框架时，对绑定到 v-model 或 value 的受控 input 强行改 type。框架内部会拦截原生属性变更，并在下一次更新周期重新同步 type，导致冲突。
实操建议：
- Vue 中避免在
v-model绑定的input上直接改type；改用ref获取原生 DOM 后，在nextTick里操作 - React 中同理，别在
value受控的前提下调用input.setAttribute('type', ...)；推荐用useState控制是否渲染明文input - 检查是否在
input处于disabled或readonly状态下调用了type修改——部分浏览器会静默拒绝
切换后密码字符显示异常（如 ●●● 变成 □□□ 或乱码）
这和字体渲染有关，不是逻辑错误。当 type="password" 时，浏览器用内置符号（通常是 ● 或 •）遮盖字符；但某些自定义字体（尤其是 WebFont）未包含这些符号字形，或 CSS 设置了 font-family: monospace，就会 fallback 成方块或问号。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 给密码框加
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;，避开自定义字体干扰 - 不要用
text-security: disc模拟密码框——它不兼容所有浏览器，且和原生type="password"的行为不一致 - 如果用了 CSS 变量控制主题色，确认没有意外覆盖了
color或background-color导致符号不可见
移动端 iOS Safari 点击“显示密码”后键盘不弹出或失焦
iOS Safari 对密码框的焦点管理非常严格。一旦你用 JS 触发 type 切换，它可能认为当前输入已结束，自动收起键盘；或者因为 DOM 重排导致焦点丢失，且不会自动恢复。
实操建议：
- 切换后立即调用
input.focus()，但必须在用户手势事件（如click）的同步上下文中执行，不能包在setTimeout或异步回调里 - 避免在
touchend后立刻改type，改用click事件监听（iOS 会为 touch 事件自动映射 click） - 如果用了
inputmode="text"或autocapitalize等属性，确保切换前后保持一致，否则 Safari 可能拒绝重新激活键盘
最麻烦的其实是 iOS 键盘策略和浏览器对 type 的语义约束交织在一起，改一个地方常牵出另一个问题。调试时优先确认是否复现于原生 HTML + JS 环境，排除框架封装层的干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
