Question

使用jQuery UI打开模式对话框时，您会注意到如果使用Tab键，则可以关注对话框的按钮，但会忽略对话框外的任何输入。我试图用jQuery UI Tools Overlay来实现同样的行为，但我不确定jQuery UI是如何做到的。它似乎没有将元素的选项卡索引设置为-1，此外，这样做将非常繁琐，因为它将涉及查找不属于对话框的所有可聚焦元素。如果您需要自动化，这将不是很好。有没有办法禁用焦点除了少数几个页面的所有元素？

Answer 1

对话框小部件实际处理keypress事件并执行自己的 Tab 键处理。此处理忽略对话框外的可列表元素。

相关的源代码（current version at the time of this post中的第286至305行）是：

// prevent tabbing out of modal dialogs
if (options.modal) {
    uiDialog.bind('keypress.ui-dialog', function(event) {
        if (event.keyCode !== $.ui.keyCode.TAB) {
            return;
        }

        var tabbables = $(':tabbable', this),
            first = tabbables.filter(':first'),
            last  = tabbables.filter(':last');

        if (event.target === last[0] && !event.shiftKey) {
            first.focus(1);
            return false;
        } else if (event.target === first[0] && event.shiftKey) {
            last.focus(1);
            return false;
        }
    });
}

请注意，TrueBlueAussie的评论是正确的，并且用于绑定错误事件的对话框小部件的释放。应使用keydown代替keypress：

uiDialog.bind('keydown.ui-dialog', function(event) {
    // ...
});

Answer 2

这是解决此问题的代码块：

// prevent tabbing out of modal dialogs
this._on(uiDialog, {
    keydown: function(event) {
        if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) {
            return;
        }
        var tabbables = $(":tabbable", uiDialog),
            first = tabbables.filter(":first"),
            last = tabbables.filter(":last");
        if (event.target === last[0] && !event.shiftKey) {
            first.focus(1);
            return false;
        } else if (event.target === first[0] && event.shiftKey) {
            last.focus(1);
            return false;
        }
    }
});

看起来jQuery UI为jQuery选择器引擎添加了一个过滤器（:tabbable），当对话框处于活动状态时，它只允许选项卡在模态的可列表元素之间循环。

代码来自：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

jQuery UI Dialog如何禁用对背景输入的关注？

2 个答案: