JavaScript, разрешить пользователю сосредоточиться только на определенных элементах страницы?

В пользовательском интерфейсе jQuery они захватывают вкладки, игнорируя другие клавиши, и ограничивают последовательность вкладок только элементами вкладок в диалоговом окне. См. фрагмент в исходном коде 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 — это событие с пространством имен. Это позволяет разработчикам легче идентифицировать события, например. для включения и удаления. Но с функциональной точки зрения вы можете считать это обычным событием keypress.

Сделать переполнение тела скрытым

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

демонстрация серого экрана jQuery

Я хотел бы принять ответ Уильяма Ниу, но есть недостаток, который мешает ему работать в моем веб-приложении. Если первым или последним элементом в диалоговом окне является переключатель, этот код не будет работать в IE. Браузер перейдет к группе переключателей один раз.

Если выбрана радиокнопка, которую браузер выделяет при переходе пользователя к группе радиокнопок, тогда этот код будет работать. Однако выбранная радиокнопка не является той, которую браузер выделяет при переходе пользователя к группе радиокнопок, тогда фокус будет потерян из диалогового окна.

Вот код, который я написал, который решает эту проблему:

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

Как видите, я заменяю переменные first и last Уильяма на группы элементов. Если первый или последний элемент с вкладками в диалоговом окне является переключателем, он будет включать все переключатели с таким же именем.

В остальном этот код работает так же, как код Уильяма.