将 tabindex 限制为页面的一部分

Question

情况：

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

问题：

当模态窗口打开时，只有窗口处于活动状态，无法使用鼠标访问页面的其余部分，但可以通过按 Tab 键移出模态窗口来访问元素。

问题：

如何通过使用选项卡按钮将移动限制为仅表单窗口内的元素？

我唯一能想到的是，当模式窗口打开时，使用 Javascript 在所有表单元素（和其他可聚焦元素）上设置 tabindex=-1 ，然后设置 tabindex > 当模态窗口关闭时，值恢复为之前的值。 有更简单/更好的方法吗？

Answer 1

捕获 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)) 函数

Answer 2

如果您想将焦点限制在

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
})

所有现代浏览器支持的dom“parent”内

Answer 3

查看 jQuery BlockUI 插件。他们有使用带有两个按钮的模式框的示例，并且它也限制选项卡。

它可能会或可能不会与您的模态窗口一起开箱即用，但值得一看，而不必实现您自己的解决方法。

Answer 4

何时在 React 中执行此操作。我可以像您在问题中所说的那样传递 tabIndex 。我还必须尝试使用​​pointerEvents none css，对于我的情况下的不可见部分。

Answer 5

尽管这是一篇旧帖子，但我一直在寻找该问题的解决方案，并执行了以下操作来解决它。

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

$('#formId :input').prop('disabled',true);

当模态表单关闭时，您可以再次启用输入元素。

在页面周围“切换”时不会考虑禁用字段。