HTML5密码怎么设成显示隐藏切换_加显示隐藏按钮提升体验详解【详解】-html教程

健壮的密码显示切换需动态修改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 必须同步更新，否则屏幕阅读器会读错状态。