Javascript 将tabindex焦点限制在页面的某一部分

情况：

我有一个网页，可以打开模式窗口（灯箱），其中包含用户可以输入数据的表单。用户通常使用键盘导航，从一个字段切换到下一个字段

问题：

当模式窗口打开时，只有该窗口处于活动状态，使用鼠标无法访问页面的其余部分，但可以通过从模式窗口中弹出选项卡来访问元素

问题：

如何通过使用tab按钮将移动限制为仅限于表单窗口中的元素

我能想到的唯一一件事是在打开模式窗口时使用Javascript在所有表单元素（和其他可聚焦元素）上设置

tabindex=-1

，然后在关闭模式窗口时将

tabindex

值设置回它们以前的值。 有更简单/更好的方法吗？

看一下。它们有，并且它也限制了tab

---

它可能会也可能不会在你的模态窗口中开箱即用，但它值得一看，而不必实施你自己的解决方法。

尽管这是一篇老文章，我一直在寻找解决这个问题的方法，并做了以下工作来解决它

使用JQuery，我在模态窗口打开时禁用了不同表单和div中的所有输入字段（模态表单本身上的字段除外）

$（'formId:input'）.prop（'disabled'，true）

关闭模态窗体后，可以再次启用输入元素

在您的页面上进行“tab”操作时，不考虑禁用的字段。
捕获
选项卡键如何？在最后一个元素上，然后使用
shift tab

我在多模式日志环境中使用它，在对话框中保持焦点，用鼠标或其他键在对话框之间切换

inputs=".editing, input, textarea, button, a, select"
no_tab="[type='hidden'], :disabled"

$focusable=dlg.$form.find(inputs).not(no_tab)


$fa_first=$focusable.first()
$fa_last=$focusable.last()

$fa_last.on("keydown", (evt) =>
    if evt.keyCode==9 && ! evt.shiftKey
        $fa_first.focus()
        evt.preventDefault()
        false
)
$fa_first.on("keydown", (evt) =>
    if evt.keyCode==9 && evt.shiftKey
        $fa_last.focus()
        evt.preventDefault()
        false
)

小编辑：通过jQuery“on（）”替换了我的on“unibind（）”（=.off（x）.on（x））函数，以防您想限制dom“parent”中的焦点

受到所有现代浏览器的支持
虽然三年过去了，但您是否解决了问题？如果是的话，你能在这里分享一下吗？我找不到比我在问题中提到的更好的解决方案：简单地迭代模态窗口之外的所有元素，并将它们的tabindex设置为-1。困难在于您需要跟踪所设置的元素及其原始tabindex值，以便在关闭模式窗口后恢复原始值。它工作得很好，使用jQuery实现。唯一的问题是IE中有100多个元素具有tabindex属性的页面，尽管IE的较新版本可能更好。解决方法就是不要在IE中运行这些页面。链接也被考虑用于标签。@JoelAlvarezMyrrie:好问题！我不记得了，prob。这是一个浏览器不兼容或只是一个削减和过去的愚蠢。。。（哦，我看到缺少select！）“引用错误：未定义节点”
parent.addEventListener('focusout', function(event) {
    event.stopPropagation();

    if (node.contains(event.relatedTarget)) {  // if focus moved to another 
                                                              parent descend
        return;
    }

    parent.focus();  // otherwise focus on parent or change to another dom
})