Ограничить фокусировку tabindex разделом страницы - PullRequest
Новая
       27

Ограничить фокусировку tabindex разделом страницы

22 голосов
/ 06 марта 2011

Положение:

У меня есть веб-страница, которая открывает модальные окна (лайтбоксы), которые содержат формы, в которые пользователь может вводить данные. Обычно пользователи перемещаются по клавиатуре, переключаясь с одного поля на другое.

Проблема:

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

Вопрос:

Как я могу ограничить движение, используя кнопку табуляции только для элементов в окне формы?

Единственное, о чем я могу думать, - это использование Javascript для установки tabindex=-1 на всех элементах формы (и других фокусируемых элементах), когда модальное окно открывается, и затем для значений tabindex обратно на прежние значения, когда модальное окно закрыто. Есть ли более простой / лучший способ?

Ответы [ 4 ]

3 голосов
/ 01 июня 2016

Как насчет ловли tab-key?На последнем элементе, а затем поместите фокус на первый и наоборот с помощью shift-tab

. Это я использую в среде multi-modless-diaolog, чтобы сохранить фокусировку в диалоге, переключаясь между диалогами.с помощью мыши или другой клавиши 

inputs=".editing, input, textarea, button, a, select"
no_tab="[type='hidden'], :disabled"

$focusable=dlg.$form.find(inputs).not(no_tab)


$fa_first=$focusable.first()
$fa_last=$focusable.last()

$fa_last.on("keydown", (evt) =>
    if evt.keyCode==9 && ! evt.shiftKey
        $fa_first.focus()
        evt.preventDefault()
        false
)
$fa_first.on("keydown", (evt) =>
    if evt.keyCode==9 && evt.shiftKey
        $fa_last.focus()
        evt.preventDefault()
        false
)

small edit: заменена функция my on "unibind ()" (= .off (x) .on (x)) через jQuery "on ()"

1 голос
/ 06 июля 2018

на случай, если вы хотите ограничить фокус внутри dom "parent" 

parent.addEventListener('focusout', function(event) {
    event.stopPropagation();

    if (node.contains(event.relatedTarget)) {  // if focus moved to another 
                                                              parent descend
        return;
    }

    parent.focus();  // otherwise focus on parent or change to another dom
})

поддерживается всеми современными браузерами

1 голос
/ 12 февраля 2012

Взгляните на jQuery BlockUI Plugin .У них есть пример использования модального окна с двумя кнопками , и он также ограничивает вкладки.

Может работать или не работать "из коробки" с вашими модальными окнами, ноэто стоит посмотреть вместо того, чтобы реализовывать свой собственный обходной путь.

0 голосов
/ 09 января 2013

Несмотря на то, что это старый пост, я искал решение этой проблемы и сделал следующее, чтобы решить ее.

Использование JQuery Я отключил все поля ввода в различных формах и div, как только открывается модальное окно (кроме полей в самой модальной форме).

$('#formId :input').prop('disabled',true);

когда модальная форма закрыта, вы можете снова включить элементы ввода.

Отключенные поля не учитываются при "закладке" вокруг вашей страницы.

...