jQuery UI Dialog 如何禁用对后台输入的关注？答案

【问题标题】：How does jQuery UI Dialog disable focus on background inputs?jQuery UI Dialog 如何禁用对后台输入的关注？
【发布时间】：2012-10-17 14:44:44
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui jquery-tools

【解决方案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) {
    // ...
});

【讨论】：

啊，是的，它看起来有点难以模仿，但这正是我想要的。谢谢
请注意确定这是否是错误复制，或者您引用的来源与 j08691 在同一日期的答案不同，但要执行此选项卡键处理需要 keydown，而不是 keypress . keypress 为时已晚（或根本不触发选项卡）。
@TrueBlueAussie，这绝对不是复制错误（我追踪了原始来源there），但我可能复制粘贴了一个错误，是的:) 我会修复链接并错误。
只需要在我自己的自定义 MessageBox 插件（即不使用 JQuery UI 对话框的对话框）中实现此代码，并发现 keypress 永远不会为 TAB 触发，因为浏览器会在 @ 期间吃掉它987654333@。如果您更改代码，我很乐意将我的 DV 变成 UV（完成）:)

【解决方案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

【讨论】：

截至今天keydown 是正确的。 Frédéric Hamidi 的答案使用 keypress 并且不会触发 tab 键。 +1