如何在模式打开时阻止 TAB 键事件触发

Question

显示模态时，如何禁用 TAB 等关键事件？我在页面上的表单中有多个按钮和字段，可以通过 Tab 键选择（聚焦）。我想在显示模态时禁用它。该应用程序使用 Angular，模态位于子组件中。

<button tabindex="0">Button1</button>
<button tabindex="0">Button2</button>
<form>...</form>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">...</div>
  </div>
</div>

Answer 1

您可以添加自己的事件侦听器：

// Your event listener
function preventTab(e) {
  e = e || window.event;
  if (e.keyCode === 9) { // If tab key is pressed
    e.preventDefault() // Stop event from its action
  }
}

// Call this when modal window opens
document.addEventListener(preventTab);

// Call this when modal window closes/unmounts
document.removeEventListener(preventTab);