type属性无法CSS过渡，应保持type="password"不变，用两个重叠input通过opacity过渡模拟明文显示，同步状态并确保表单提交依赖密码input的value。
用 type 切换时过渡无效？因为浏览器不支持 type 属性的 CSS 过渡
直接对 和 应用 transition 没用——type 是 HTML 属性，不是 CSS 可动画属性。浏览器不会触发重绘过渡，输入框会瞬间切换，毫无缓动效果。
真正能过渡的是「视觉层」：比如用 opacity、transform 或覆盖层渐显/渐隐。核心思路是保持 type="password" 不变，通过其他元素模拟“显示明文”的状态。
推荐方案：用两个 input 重叠 + opacity 过渡
在同一个容器里放两个 ：一个始终 type="password"（用于提交和校验），一个 type="text"（仅用于显示），通过 opacity 控制可见性。两者尺寸、字体、padding 完全一致，视觉上无缝切换。
- 给外层容器设
position: relative，两个 input 都position: absolute且top: 0; left: 0 - 明文 input 默认
opacity: 0; pointer-events: none；点击“显示”按钮后加 class（如showing），设opacity: 1; pointer-events: auto - 必须加
transition: opacity 0.2s ease到明文 input 上（不能只加在 class 里，否则初始无过渡） - 注意同步
value、disabled、readonly状态，用 JS 绑定input事件实时同步
为什么不用伪元素或 contenteditable？
有人试过用 ::after 覆盖密码点再用 content 插值，但无法选中文本、不支持全选（Ctrl+A）、光标定位错乱；contenteditable div 则失去原生 input 的表单验证、自动填充、移动端键盘类型等能力。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更关键的是：这类方案绕过了 input 的 value 机制，导致 form.submit() 或 FormData 获取不到值，或者需要额外映射逻辑，出错概率高。
- 真实提交必须依赖那个
type="password"的 input，它的value始终是明文（只是被遮盖） - 明文 input 的唯一作用是「展示」，它不应参与表单提交，
name属性应为空或移除 - 不要用
display: none / block切换——它不可过渡，且会触发重排，破坏焦点和光标位置
移动端兼容性与焦点处理要手动补
iOS Safari 和部分安卓 WebView 在快速切换 opacity 时可能闪烁，或焦点丢失。解决方法：
- 切换前用
el.focus()主动聚焦到明文 input（如果它获得焦点），并用el.setSelectionRange(0, el.value.length)保持光标在末尾 - 监听
blur事件，当明文 input 失焦时，立刻把焦点交还给密码 input，并恢复其selectionRange - 避免在 transition 过程中修改
type或替换 DOM 节点——这会中断动画并清空输入法状态
过渡本身很简单，难的是让整个交互链路（焦点、光标、同步、表单集成）不露破绽。多数人卡在“看起来动了”，但一输文字或切后台就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
