将 tabindex 焦点限制在页面的某个部分答案

【问题标题】：Restrict tabindex focusing to a section of the page将 tabindex 焦点限制在页面的某个部分
【发布时间】：2011-03-05 21:14:09
【问题描述】：

情况：

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

问题：

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

问题：

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

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

【问题讨论】：

虽然3年过去了，你的问题解决了吗？如果可以，可以在这里分享一下吗？
我找不到比我在问题中提到的更好的解决方案：只需遍历模态窗口之外的所有元素并将它们的 tabindex 设置为 -1。困难在于您需要跟踪您设置的元素及其原始 tabindex 值，以便在关闭模式窗口后可以恢复原始值。它运行良好，使用 jQuery 实现。唯一的问题是在 IE 中，页面上有数百个具有 tabindex 属性的元素，尽管较新版本的 IE 可能更好。解决方案就是不要在这些页面上运行 IE。

标签： javascript html tabindex modal-popup

【解决方案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()" 替换了我的 on "unibind()" (=.off(x).on(x)) 函数

【讨论】：

@JoelAlvarezMyrrie：问得好！我不记得了，概率。这是浏览器不兼容，或者只是过去的愚蠢......（哦，我看到 select 不见了！）

【解决方案2】：

如果你想限制 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
})

所有现代浏览器都支持

【讨论】：

"ReferenceError: 节点未定义"
node 应该是 parent 因为您正在检查父元素的内部

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

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

在您的页面上“跳动”时不考虑禁用的字段。

【讨论】：

链接也被考虑用于制表符。