У меня есть всплывающее диалоговое окно (div с высоким z-индексом), которое содержит некоторые элементы ввода. Пока этот диалог открыт, я бы хотел, чтобы tab и shift-tab выполняли циклический переход только между элементами в этом диалоге. Как я могу этого добиться?

4
Evan Krall 17 Авг 2010 в 22:50

2 ответа

Лучший ответ

Вы можете использовать свойство tabIndex и установить его на -1 для всех элементов, которые вы не хотите циклически перемещать по вкладке.

<input type="text" id="no-tab-cycle" tabIndex="-1"/>

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

Может у кого-то есть ответ получше ..

Обновить с помощью образца

Используя jQuery и предполагая, что ваше всплывающее окно имеет идентификатор my-popup-dialog , этот код должен помочь, измените селекторы по своему усмотрению.

$('input, textarea, select').each(function(index) {
    $(this).attr('tabIndex', '-1');
});

$('#my-popup-dialog input, #my-popup-dialog textarea, #my-popup-dialog select').each(function(index) {
    $(this).removeAttr('tabIndex');
});
3
omarello 17 Авг 2010 в 19:50

Прямого способа сделать это нет, но вот (несколько запутанный) способ сделать это. Вам в основном нужно отслеживать, какой элемент в настоящее время находится в фокусе:

  1. Обработайте событие onfocus для всех элементов управления на вашей странице (вы можете настроить это автоматически) и в обработчике запишите элемент, получивший фокус, давайте назовем это currentFocus.

  2. Аналогично обработайте событие onblur и отметьте элемент, который только что потерял фокус, назовем это previousFocus.

  3. Теперь добавьте дополнительную логику в обработчик onfocus, который делает то, что вы хотите: если previousFocus является последним элементом управления в вашем диалоговом окне, а currentFocus - элементом управления вне вашего диалога, установите фокус на первый control в вашем диалоге - это будет обрабатывать табуляцию из последнего элемента управления. Инвертируйте эту логику, чтобы обрабатывать сдвиг табуляции вне первого элемента управления.

0
casablanca 17 Авг 2010 в 19:05