核心是动态切换input的type属性实现密码显隐，推荐用input.type="text"并保存value；应使用checkbox替代按钮以提升可访问性，绑定label并监听change事件；需设置autocomplete="off"等属性防干扰，ios safari需注意focus失效问题。
点击按钮切换 type 属性实现显示/隐藏
核心就是动态修改 <input> 的 type 值，在 "password" 和 "text" 之间切换。浏览器原生支持这个行为，无需额外库，但要注意：直接设 type="text" 后，焦点可能丢失，且部分旧版 Safari 对动态改 type 支持不稳定。
实操建议：
- 用
input.type = "text"或input.setAttribute("type", "text")都可以，但推荐前者——更简洁、兼容性更好 - 切换前先保存当前
value，避免某些浏览器重渲染时清空内容（实际中极少发生，但加个console.log验证下更稳） - 按钮用
<button type="button"></button>，防止表单意外提交
用 checkbox 控制比按钮更符合可访问性规范
WCAG 推荐用 <input type="checkbox"> 替代纯按钮，因为屏幕阅读器能自然识别其“开启/关闭”状态，用户也能用空格键操作。视觉上可通过 CSS 隐藏 checkbox，只显示文字或图标。
常见错误现象：label 没绑定 for 或没包裹 input，导致点击文字无效；或者 JS 监听的是 click 而不是 change，造成 checkbox 状态和 input 类型不同步。
实操建议：
- 绑定关系写成
<label><input type="checkbox"> 显示密码</label>或显式for="toggle-id" - JS 监听
change事件，根据e.target.checked切换input.type - 别忘了同步更新按钮文案（如 “显示” → “隐藏”），否则用户无法感知当前状态
autocomplete="off" 和 autocapitalize="none" 是容易被忽略的细节
即使密码框类型切换了，某些浏览器（尤其是移动端）仍会自动启用首字母大写或密码管理器填充提示，干扰体验。这不是 bug，是默认行为。
性能/兼容性影响：加这些属性不增加开销，但能避免 iOS 键盘弹出大写 Caps Lock、Android 自动唤起密码建议栏等意外。
实操建议：
- 在原始
<input>上固定写死：autocomplete="off" autocapitalize="none" spellcheck="false" - 不要依赖 JS 动态添加——有些浏览器只在初始渲染时读取这些属性
-
autocomplete="new-password"在部分场景下比"off"更可靠，尤其针对密码管理器
移动端真机测试时，focus() 可能触发键盘但不聚焦输入框
iOS Safari 有个众所周知的问题：切换到 type="text" 后调用 input.focus()，键盘弹出，但光标没落在框里，用户还得再点一次。这不是代码写错，是 WebKit 限制。
解决思路不是强行 hack，而是接受这个限制，转而优化交互反馈：
- 切换后立即
input.select()，哪怕没聚焦，至少全选文字，用户再点一下就能编辑 - 加一个微动效（比如边框颜色变化 + 文字提示“已显示”），让用户明确知道状态变了
- 避免在页面滚动区域深处放密码框——iOS 键盘弹出会把输入框顶出可视区，进一步加剧聚焦失败
type 切换时机和 focus 行为不一致，以及没处理好 checkbox 状态与 input 类型的同步。多在真机上点两下，比看十遍文档管用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
