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

当您使用jQuery UI打开模态对话框时,您会注意到,如果使用Tab键,则可以将焦点放在对话框的按钮上,但对话框外的任何输入都将被忽略.我试图用 jQuery UI Tools Overlay实现同样的行为,但我不知道jQuery UI是如何做的.它似乎没有将元素的选项卡索引设置为-1,此外,这样做将是非常繁琐的,因为它将涉及查找不是对话框的一部分的所有可聚焦元素.如果您需要自动化,这将不是很好.有没有一种方法来禁用焦点,除了几个页面的所有元素？

解决方法

对话框窗口实际上处理按键事件并执行自己的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) {
    // ...
});

原文地址：https://www.jb51.cc/jquery/175863.html