相关疑难解决方法(0)

假设我有一个充满可聚焦元素的文档,要么是因为它们天生具有可聚焦性(如<input type="text">),要么因为它们具有tabindex="0"等等.

现在让我们说我的文档中有一部分要显示为模式对话框,我不希望用户被对话框外的任何东西分心.我想tab键只能通过对话框的容器元素内的可聚焦元素循环.最简单的方法是什么？

如果可能的话,我正在寻找一种解决方案,它不关心对话框的内容或页面的其余部分是什么,也不会尝试修改它们.也就是说,我不想让对话框之外的元素不可聚焦.首先,这需要做出可逆的改变并跟踪状态.其次,这需要了解元素可以聚焦的所有可能方式.这让我觉得凌乱,脆弱,不易退缩.

我的第一次尝试看起来像这样,但只能在向前方向上工作(按Tab键).它不能反向工作(按Shift + Tab键).

<div>Focusable stuff outside the dialog.</div>
<div class="dialog" tabindex="0">
  <!-- Focus should be trapped inside this dialog while it's open -->
  <div class="content">
    Form contents and focusable stuff here.
  </div>
  <div class="last-focus" tabindex="0" onfocus="this.parentNode.focus()"></div>
</div>
<div>More focusable stuff outside the dialog.</div>

我宁愿看到纯JavaScript解决方案.如果有一种方法可以使用诸如jQuery之类的库来执行此操作,我更喜欢指向执行此操作的库代码的链接.