如何让dialog优先获取初始焦点并实现焦点锁定？

一、解决Dialog初始优先获取焦点的问题 #

原生<dialog>元素在模态状态下本应自动获取焦点，你之前的尝试失效，主要是这几个原因：

• 给dialog设置了tabindex="0"，干扰了原生的自动聚焦逻辑，原生dialog不需要这个属性
• 直接用open属性显示dialog，没触发模态框的内置聚焦机制

修正代码（实现初始焦点优先） #

移除dialog的tabindex，改用showModal()方法打开，同时给dialog内需要初始聚焦的元素添加autofocus：

<div>
  <h1>lets priortize for focus during tab</h1>
</div>
<input tabindex="0" type="text" placeholder="tabindex0"/>
<input type="button" tabindex="0">
<button tabindex="0" type="button">tabindex test</button>

<div>
  <button tabindex="0"> priortize paragraph before me</button>
</div>
<dialog id="para">
  <div><p>prior me </p></div>
  <!-- 给需要初始聚焦的按钮加autofocus -->
  <button autofocus>If I am not clicked don't focus further</button>
</dialog>

window.addEventListener('DOMContentLoaded', (event) => {
  const dialog = document.getElementById('para');
  // showModal()会自动触发模态框的初始聚焦和焦点锁定
  dialog.showModal();
});

二、实现Dialog内焦点锁定 #

用showModal()打开dialog时，原生就会自动锁定焦点在模态框内部，tab切换只会在dialog内的可聚焦元素循环，不需要额外设置tabindex="-1"。如果必须用非模态dialog（show()方法打开），则需要手动实现焦点循环：

手动焦点锁定逻辑（非模态场景） #

const dialog = document.getElementById('para');
// 筛选dialog内所有可聚焦元素
const focusableElements = dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

dialog.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    // 按住shift+tab时，焦点从第一个元素跳转到最后一个
    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    }
    // 按tab时，焦点从最后一个元素跳转到第一个
    else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }
});

关键注意事项 #

• 不要给<dialog>本身设置tabindex，原生dialog的聚焦逻辑针对内部元素
• showModal()是实现模态框焦点锁定的核心，会自动屏蔽外部元素的焦点
• autofocus要加在dialog内的可聚焦元素上（比如按钮），而非dialog本身

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