JavaScript，是否允许用户只关注某些页面元素？

Question

在jQuery-UI-Dialog中，我可以在我的网页上显示一个“modal”对话框，这样用户就必须单击对话框中的一个选项才能继续。

我一直在编写自己的对话框代码，但是jQuery-UI-Dialog做了一些我还不知道该怎么做的事情。

我可以在对话框后面显示一个“掩码”元素，以防止用户单击页面上的元素，但用户仍然可以使用Tab键选择对话框后面的元素。

jQuery-UI-Dialog似乎以某种方式将键盘输入捕获到对话框中，即使按下tab键也是如此。这是非常整洁的，但我要补充说，它可能会被滥用。

我需要访问DOM的哪个方面才能获得此功能？

Answer 1

我很想接受William Niu的回答，但有一个缺陷使它无法在我的web应用程序中工作。如果对话框中的第一个或最后一个元素是单选按钮，则此代码在IE中不起作用。浏览器将切换到单选按钮组一次。

如果选定的单选按钮是在用户按tabs键切换到单选按钮组时浏览器突出显示的单选按钮，则此代码将起作用。但是，选定的单选按钮不是在用户按tabs键切换到单选按钮组时浏览器突出显示的单选按钮，则焦点将从对话框中丢失。

下面是我写的一些解决这个问题的代码：

function _bindTabKeyForDialog(dialogId) {
    var tabbable = $('#' + dialogId).find(':tabbable');
    var firstElement = $(tabbable).filter(':first');
    var lastElement = $(tabbable).filter(':last');

    var firstGroup = (firstElement[0].type !== 'radio') ?
        firstElement :
        tabbable.filter("[name='" + firstElement[0].name + "']");
    var lastGroup = (lastElement[0].type !== 'radio') ?
        lastElement :
        tabbable.filter("[name='" + lastElement[0].name + "']");

    $(document).unbind('keydown.' + dialogId);
    $(document).bind('keydown.' + dialogId, function (e) {
        if (e.keyCode == 9) {
            if ($(e.target).is(lastGroup) && !e.shiftKey) {
                firstGroup.first().focus();
                e.preventDefault();
            }
            else if ($(e.target).is(firstGroup) && e.shiftKey) {
                lastGroup.first().focus();
                e.preventDefault();
            }
        }
    });
} // end _bindTabKeyForDialog

如您所见，我将William的first和last变量更改为元素组。如果对话框中的第一个或最后一个可选项卡元素是单选按钮，则它将包含所有同名的单选按钮。

否则，此代码的功能与William的代码相同。

Answer 2

在jQuery UI中，它们捕获选项卡，而忽略其他键，并将选项卡序列限制为对话框上的可选项卡元素。查看original source of code of jQuery UI v1.8.5中的代码片段

        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;
            }
        });

keypress.ui-dialog是一个namespaced event。它使开发人员能够更容易地识别事件，例如用于触发和删除。但是在函数方面，你可以把它当作一个普通的keypress事件。

Answer 3

将正文溢出设置为隐藏

$('body').css({'overflow':'hidden'});

jQuery screen grey out box demo