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

本文介绍了jQuery UI对话框如何禁用对背景输入的关注?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

使用jQuery UI打开模式对话框时，您会注意到，如果使用Tab键，则可以专注于对话框的按钮，但是对话框外部的任何输入都将被忽略.我正在尝试使用 jQuery UI Tools Overlay 实现相同的行为，但是我不确定如何jQuery UI正在这样做.似乎并没有将元素的tab索引设置为-1，而且这样做非常繁琐，因为它将涉及查找不属于对话框的所有可聚焦元素.如果您需要自动化，那将不是很好.有没有一种方法可以禁用页面中除少数元素以外的所有元素?

When you open a modal dialog using jQuery UI, you'll notice that if you use the Tab key, you can focus on the dialog's buttons, but any inputs outside the dialog are ignored. I'm trying to achieve this same behavior with jQuery UI Tools Overlay , but I'm not sure how jQuery UI is doing it. It doesn't seem to be setting the elements' tab index to -1, and besides, doing this would be extremely tedious since it would involve finding all the focusable elements that aren't part of the dialog. This wouldn't be very good if you require automation. Is there a way to disable focus an all of the page's elements except a few?

推荐答案

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

The dialog widget actually handles the keypress event and performs its own Tab key processing. This processing ignores tabbable elements outside of the dialog.

相关的源代码(本文发布时的当前版本)是:

// 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:

Note that TrueBlueAussie's comment is right, and that release of the dialog widget used to bind to the wrong event. keydown should be used instead of keypress:

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