如何将焦点限制在假模态对话框中的一组控件上？答案

【问题标题】：How to restrict focus to a set of controls in a fake modal dialog?如何将焦点限制在假模态对话框中的一组控件上？
【发布时间】：2014-05-06 04:27:24
【问题描述】：

我有一个假的模式对话框，它的操作类似于 Windows 8 对话框：

我想将焦点限制在表单上的控件上，但默认情况下，它将选项卡到应用程序菜单（和浏览器地址栏）。

我尝试了以下操作，但它只会向前换行（从最后一项到第一项）。 Shift-tab 将在第一个项目上停止而不是环绕：

$panel.on('focusout', function (e: JQueryEventObject)
{
    if (!THIS.inFocus)
    {
        THIS.inFocus = true;
        var $buttons = THIS.$content.find(':focusable');
        //if (!$buttons.is($(e.target)))
        {
            var $focus = $(e.originalEvent.srcElement);
            if ($focus.is($buttons.first()))
            {
                $buttons.last().focus();
            }
            else if ($focus.is($buttons.last()))
            {
                $buttons.first().focus();
            }
        }
        THIS.inFocus = false;
    }

注意：THIS.inFocus 只是插件的一个属性，避免多次触发

我尝试使用if (!$buttons.is($(e.target))) 检查焦点的新目标是否不在面板中，但这不起作用（在上面的示例中已注释掉）。

在不破坏正常浏览器 TAB 行为（太多）的情况下，将焦点限制在一组控件上的最佳方法是什么？我意识到 jQuery-UI 有一个模型对话框可能没有这些问题，但我尽量避免使用 jQuery-UI 如果可能。

更新

上面的代码实际上比我想象的更糟糕。当我添加更多按钮（选项列表）时，制表符只是从第一个项目移动到最后一个项目并再次返回！

【问题讨论】：

标签： jquery modal-dialog

【解决方案1】：

我不相信您可以完全阻止 tab 键将焦点移动到浏览器的位置栏。但是，您可以使用 tabindex 属性将焦点限制在 HTML 元素上。

为任何表单输入、按钮或锚链接分配正的tabindex 值，Tab 键将按从低到高的顺序在它们之间循环。任何带有tabindex="0"（默认）的都将在之后循环播放，而带有tabindex="-1"的将被忽略（但仍然可以通过点击/触摸触发）。

您可以使用.attr('tabindex') 动态添加和删除值，尽管.prop('tabindex') 也可以工作。

http://jsfiddle.net/mblase75/8KkJ8/

【讨论】：