健壮的密码显示切换需动态修改input.type属性，同时保存并恢复光标位置、保持焦点、同步更新aria-label和图标，确保跨浏览器兼容与可访问性。
怎么用 type="password" 和 type="text" 切换显示状态
密码框默认隐藏内容，靠的是 type="password"。要实现“显示/隐藏”切换，本质就是动态改 type 属性值——从 "password" 切到 "text"，再切回来。不能直接用 input.value 做判断，也不能靠 CSS 伪元素遮盖，必须操作 DOM 的 type 属性。
常见错误是：在 Safari 或旧版 iOS 上直接设 input.type = "text" 后，焦点丢失、光标跳到开头，或输入法中断。这是因为部分浏览器对 type 动态变更支持不完整。
- 务必先保存当前
selectionStart和selectionEnd，切换后手动恢复光标位置 - 避免在
input失去焦点（blur）时触发切换，否则 iOS 可能强制收起键盘 - 不要用
setAttribute('type', ...)，要用input.type = ...，前者在 IE11 及部分安卓 WebView 中无效
togglePasswordVisibility() 函数该怎么写才兼容
一个健壮的切换函数得处理光标、焦点、可访问性（a11y）和防重复点击。核心不是“改 type”，而是“改了之后不让用户感知异常”。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
function togglePasswordVisibility(input, toggleBtn) {
const isPassword = input.type === 'password';
const wasFocused = document.activeElement === input;
// 保存光标位置
const start = input.selectionStart;
const end = input.selectionEnd;
input.type = isPassword ? 'text' : 'password';
// 恢复光标和焦点
if (wasFocused) {
input.focus();
input.setSelectionRange(start, end);
}
// 更新按钮 aria-label 和图标
toggleBtn.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');
toggleBtn.textContent = isPassword ? '?️' : '?';
}
注意：setSelectionRange 在 type 切换后必须调用，否则 Chrome 和 Safari 都会重置光标到开头；aria-label 必须同步更新，否则屏幕阅读器会读错状态。
为什么不能只靠 CSS + ::after 模拟“显示”效果
有人试图用绝对定位盖一层透明文字、或用 ::before 显示明文副本，这在视觉上像“显示”，但实际输入内容仍被 type="password" 拦截——JavaScript 读 input.value 还是星号，复制粘贴仍是密文，表单提交也还是加密传输。这不是真切换，只是障眼法。
更严重的问题是安全与语义断裂：
- 密码字段若未真正设为
type="text"，密码管理器（如 1Password、Bitwarden）无法识别并自动填充 - 辅助技术（如 VoiceOver）会把该输入框始终当作密码域播报，即使你画了个“明文”图标
- 移动端软键盘类型不会变：数字键盘不会变成全键盘，影响用户体验
移动端点击按钮没反应？检查这三处
iOS 和部分安卓 WebView 对 click 事件监听有严格限制，尤其当按钮是纯 且无 tabindex 时，可能根本收不到事件。
- 确保按钮有
role="button"且tabindex="0"，否则 VoiceOver 或某些安卓读屏器会跳过它 - 别用
pointer-events: none或opacity: 0隐藏按钮再用伪元素画图标——这会让真实按钮不可点 - 如果按钮是 SVG 图标，确认
外层包裹了可交互容器，且fill/stroke没覆盖点击热区
最稳妥的做法：按钮用 ，图标用 包裹，所有交互逻辑绑定在 button 元素上。
光标位置、焦点管理、a11y 属性同步——这三件事漏掉任何一项，用户就会在某个设备上卡住，而且很难复现。别假设“切个 type 就完事”。
