Создайте порядок табуляции замкнутого цикла в элементах управления html

У меня есть несколько полей в форме html, и я хочу перемещаться по ней с помощью атрибута tabindex. Я хочу создать порядок табуляции таким образом, чтобы, когда он встречает последнее поле и выходит из него, он перемещает фокус на первое поле в форме. В настоящее время фокус теряется после выхода из последнего поля.

Я сжал проблему до простого примера HTML ниже. Циклический порядок, в котором должна перемещаться вкладка: textbox1 -> textbox2 -> radiobutton -> textbox4 -> textbox1 и так далее.

<input type="text" id="txt1" tabindex=1/>
<input type="text" id="txt2" tabindex=2/>
<input type="radio" id="radio1" tabindex=3/>
<input type="text" id="txt3" tabindex=4/>


javascript html jquery tabs tab-ordering
person subhrendu    schedule 18.12.2018    source источник
comment
Использование tabindex со значением больше 0 настоятельно не рекомендуется. dequeuniversity.com/rules/axe/3.2/tabindex   -  person David T    schedule 06.02.2020

Ответы (2)


arrow_upward
1
arrow_downward

вам нужно выйти из поведения браузера по умолчанию и использовать что-то вроде JQuery для обработки фокусировки полей, что-то простое, как показано ниже, должно работать, просто помните о любых потенциальных проблемах с доступностью, которые вы можете вызвать.

$( "#txt3" ).blur(function() {
  $( "#txt1" ).focus();
});
person M T    schedule 18.12.2018
comment
он не устанавливает фокус на первое текстовое поле. - person subhrendu; 18.12.2018

arrow_upward
1
arrow_downward

По какой-то причине это сработало для меня, только если я установил фокус в конце стека вызовов.

$('#lastInLoop').blur(function() {
  setTimeout(() => { $('#firstInLoop').focus() }, 0);
});

Я считаю, что этот хакер - ужасная идея. Но это решило мою проблему, и я не работаю в НАСА, так что ...

person josephxbrick    schedule 22.05.2021