Angular Material Dialog：如何禁用可聚焦元素的自动聚焦功能？

我完全懂你的困扰——给每个可聚焦元素手动加tabindex="-1"确实太繁琐了，完全是重复劳动！这里有几个更简洁的方案，不用逐个标记元素就能解决：

方案1：用隐形的autofocus元素抢占焦点 #

这是最省心的方法：在对话框的最顶部添加一个不可见的、可聚焦的元素，并给它加上autofocus属性。对话框打开时，焦点会自动落在这个元素上，而非默认的首个可交互元素，相当于间接“禁用”了原有的自动聚焦行为：

<div class="modal-dialog">
  <!-- 隐形聚焦占位符，不会影响页面和交互 -->
  <span tabindex="0" style="position: absolute; opacity: 0; pointer-events: none;" autofocus></span>
  
  <!-- 你的原有对话框内容 -->
  <p>Contact us on <a href="mailto:email@email.com">email@email.com</a></p>
  <button>Send Message</button>
</div>

这个占位元素完全隐形，也不会响应点击，只是默默接收初始焦点，完美避开给其他元素挨个加标记的麻烦。

方案2：通过JavaScript手动控制焦点逻辑 #

如果你的对话框是通过JS触发打开的，可以在对话框显示时直接干预焦点行为：

const dialog = document.querySelector('.modal-dialog');

// 以原生<dialog>元素为例，监听show事件
dialog.addEventListener('show', (e) => {
  // 阻止浏览器默认的自动聚焦行为
  e.preventDefault();
  // 可选：把焦点设置到对话框容器本身（需给容器加tabindex="-1"）
  dialog.setAttribute('tabindex', '-1');
  dialog.focus();
});

注意：不同UI框架的对话框打开事件名称可能不同（比如Bootstrap是shown.bs.modal），需要根据你用的库对应调整事件名。

方案3：全局禁用对话框内元素的可聚焦性（慎用） #

如果你的对话框是纯展示类、完全不需要任何交互，可以用CSS快速禁用所有元素的可聚焦性：

.modal-dialog * {
  tabindex: -1 !important;
  pointer-events: none;
}

不过这个方法会让所有元素都失去交互能力，只适合完全没有按钮、链接的纯内容对话框，不推荐用于有交互需求的场景。

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