不能直接修改 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）

示例片段：

anything-to-html

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

下载

<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">&#128065;</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" 是数字+字母精简键盘。这点影响输入效率，但很少有人测试。