将tabindex限制为页面的一部分

Question

情况：

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

问题：

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

题：

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

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

Answer 1

赶上tab-key怎么样？在最后一个元素，然后把焦点放在第一个，反之亦然与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（）”替换了我的“unibind（）”（=。off（x）.on（x））函数

Answer 2

看看jQuery BlockUI Plugin。他们有an example using a modal box with two buttons，它也限制标签。

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

Answer 3

如果你想限制dom“parent”里面的焦点

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

所有现代浏览器都支持

Answer 4

即使它是一个旧帖子我正在寻找解决这个问题的方法，并做了以下解决方案。

使用JQuery我会在模态窗口打开时禁用不同形式和div的所有输入字段（模态窗体本身除外）。

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

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

在页面周围“标记”时，不会考虑禁用的字段。