9

当您使用 jQuery UI 打开一个模态对话框时,您会注意到如果您使用 Tab 键,您可以专注于对话框的按钮,但对话框之外的任何输入都将被忽略。我正在尝试使用jQuery UI Tools Overlay实现相同的行为,但我不确定 jQuery UI 是如何做到的。它似乎没有将元素的选项卡索引设置为 -1,此外,这样做会非常乏味,因为它需要找到所有不属于对话框的可聚焦元素。如果您需要自动化,这将不是很好。有没有办法禁用除少数之外的所有页面元素的焦点?

4

2 回答 2

9

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

相关的源代码(本文发布时当前版本的第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) {
    // ...
});
于 2012-10-17T15:04:26.257 回答
4

这是处理此问题的代码块:

// 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:tabbable向 jQuery 选择器引擎添加了一个过滤器 ( ),并且当对话框处于活动状态时,它只允许选项卡在模式的可选项卡元素之间循环。

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

于 2012-10-17T15:04:49.497 回答