当您使用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) {
// ...
});
