如何设置HTML5对话框Tab键焦点循环，实现Modal模式下的聚焦攻略？

本文共计1119个文字，预计阅读时间需要5分钟。

浏览器原生+

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 调用 showModal() 后立刻调用 dialogElement.focus()，但注意：需确保首个可聚焦子元素存在且可聚焦（如 input、button、带 tabindex="0" 的元素）
• 更稳妥的做法是聚焦到对话框内第一个可聚焦元素：

  dialog.showModal();<br>const firstFocusable = dialog.querySelector('button, input, select, textarea, [tabindex]:not([tabindex="-1"])');<br>if (firstFocusable) firstFocusable.focus();

• 若首个元素是 <input type="hidden"> 或 tabindex="-1"，它会被 querySelector 忽略，避免误聚焦失效

Tab 键无法在 <dialog> 内循环，得自己拦截 keydown

原生 <dialog> 没有焦点围栏（focus trap），Tab / Shift+Tab 会直接跳出对话框，进入背景页面或浏览器地址栏——这是最常被吐槽的“模态失效”现象。