原生dialog元素打开时能否实现自身聚焦？无需焦点陷阱

原生<dialog>默认不会在打开时让自身获得焦点——调用showModal()后，浏览器会自动把焦点移到dialog内部第一个可聚焦元素（比如你示例里的“OK”按钮）。

不过可以通过纯原生方式实现让dialog自身获焦点，不需要焦点陷阱，步骤如下：

1. 给dialog元素添加tabindex="-1"，使其成为可聚焦元素（默认情况下dialog本身不具备可聚焦性）
2. 监听dialog的show事件，在事件回调里调用dialog.focus()

修改后的示例代码：

HTML #

<dialog id="dialog" tabindex="-1">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>OK</button>
  </form>
</dialog>

<button onclick="dialog.showModal()">Open Dialog</button>

JavaScript #

const dialog = document.getElementById('dialog');
dialog.addEventListener('show', () => {
  dialog.focus();
});

说明 #

• tabindex="-1"允许元素通过JS获得焦点，但不会被键盘Tab键选中，避免干扰正常的焦点导航
• show事件在dialog显示后触发，此时调用focus()能确保焦点落在dialog元素上

内容的提问来源于stack exchange，提问作者Loki