不能直接修改 type="password" 的 type 属性，因 safari 和旧版 chrome 会清空输入值，属规范行为；应采用双 input 切换或现代 inputmode 方案，并同步焦点、光标及状态。

为什么 type="password" 不能直接改 type 属性？

因为 Safari 和部分旧版 Chrome 在运行时修改 input 的 type 属性会清空输入值，哪怕只是从 "password" 切到 "text" 再切回来。这不是 bug，是规范行为——浏览器认为类型变更意味着控件重置。

所以不能写 input.type = "text" 这种粗暴切换。得用更稳妥的方式：

• 用两个 input 元素（一个 type="password"，一个 type="text"），靠 display 切换显示
• 或复用同一个 input，但用 input.setAttribute("type", "text") + setTimeout 延迟赋值（兼容性差，不推荐）
• 现代方案：用 inputmode="text" 配合 pattern 控制软键盘，但核心仍是双 input 切换

怎么让小眼睛图标响应点击并同步状态？

图标本身不参与表单提交，纯视觉反馈。关键是它和输入框的状态必须一致，且点击后要可逆。常见错误是只改图标不改输入框，或反之。

实操建议：

• 给图标加 data-state="hidden" 属性，初始为隐藏；点击时 toggle 该属性
• 输入框始终用 type="password"，但配合一个同名同值的 type="text" input（display: none），用 input.value 双向同步
• 监听图标点击，同时操作两个 input 的 display 和图标 class（如 fa-eye/fa-eye-slash）

示例片段：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

<div class="input-with-toggle">
  <input type="password" id="pwd" name="pwd" value="123456"><input type="text" id="pwd-text" name="pwd" value="123456" style="display:none"><span class="toggle-icon" data-state="hidden">👁</span>
</div>

如何避免焦点丢失和光标跳转？

切换显示类型时，如果当前 input 失去焦点，用户就得重新点一次——体验断层。尤其在移动端，软键盘频繁收起/弹出很干扰。

关键点：

• 切换前记录当前 input 的 selectionStart 和 selectionEnd
• 切换后立即将焦点设回，并用 setSelectionRange() 恢复光标位置
• 两个 input 必须共用 name 和 id（或用 aria-labelledby 关联），否则表单序列化会漏数据
• 别用 visibility: hidden，要用 display: none，否则仍占布局且可能被读屏软件误读

要不要支持密码强度实时校验？

可以加，但别耦合在切换逻辑里。明文显示 ≠ 校验触发时机。很多项目把“显示密码”和“实时提示弱密码”混在一起，结果一点击眼睛，就弹出红色提示，用户以为输错了。

建议分开处理：

• 密码校验走 input 的 input 或 blur 事件，与图标点击无关
• 图标只负责 type 视觉状态，不触发任何验证逻辑
• 若需在明文状态下高亮弱项，用独立的 data-show-strength="true" 控制，而非依赖显示状态

真正容易被忽略的是：移动端 iOS 键盘在 type="text" 下默认唤出全键盘（含空格、句号），而 type="password" 是数字+字母精简键盘。这点影响输入效率，但很少有人测试。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！