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

Question

В jQuery-UI-Dialog позволяет мне отображать «модальное» диалоговое окно на моей веб-странице, так что пользователь должен щелкнуть опцию в диалоговом окне, чтобы продолжить.

Я писал свой собственный код диалогового окна, но есть кое-что, что делает jQuery-UI-Dialog, но я пока не знаю, как это сделать.

Я могу отобразить элемент «маска» за диалоговым окном, чтобы пользователь не мог щелкнуть элементы на странице, но пользователь по-прежнему может выбирать элементы за диалоговым окном, используя клавишу табуляции.

Кажется, что jQuery-UI-Dialog каким-то образом перехватывает ввод с клавиатуры внутри диалогового окна даже при нажатии клавиши табуляции. Это очень аккуратно, но я добавлю, что им можно злоупотреблять.

Какой аспект DOM мне нужен для доступа к этой функции?

Answer 1

В пользовательском интерфейсе 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 событием.

Answer 2

Я хотел бы принять ответ Уильяма Ниу, но есть недостаток, который не позволяет ему работать в моем веб-приложении.Если первый или последний элемент в диалоге является переключателем, то этот код не будет работать в 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 Уильяма на группы элементов.Если первый или последний элемент с вкладками в диалоговом окне является переключателем, то он будет включать все переключатели с одинаковым именем.

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

Answer 3

Установить переполнение тела скрытым

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

jQuery экран с серой рамкой демо