jQuery UI对话框如何禁用焦点背景输入？

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

来源

2012-10-17 JayPea

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

相关的源代码（线路中的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的评论是正确的，并用来绑定到错误的事件的对话框控件的释放。应该使用的keypress：

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

来源

2012-10-17 15:04:26

是啊，它看起来有点难以模仿，但是这就是我一直在寻找。谢谢 – JayPea

请注意，如果这是一个小问题，或者您引用的来源与j08691同一日期的答案不同，但要做到这一点，tab-key处理需要'keydown'，而不是'keypress'。 'keypress'太晚了（或者根本没有开启标签）。 –

@TrueBlueAussie，绝对不是miscopy（我跟踪了原始来源[有]（https://github.com/jquery/jquery-ui/blob/1.8/ui/jquery.ui.dialog.js）），但我可能复制粘贴了一个错误，是的:)我会修复链接和错误。 –

这里是代码处理此块：

// 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-17 15:04:49 j08691

从今天开始'keydown'是正确的。 'FrédéricHamidi'的答案使用'keypress'并且不会触发'tab'键。 +1 –

jQuery UI对话框如何禁用焦点背景输入？

回答

相关问题