Создайте порядок табуляции замкнутого цикла в элементах управления html
У меня есть несколько полей в форме html, и я хочу перемещаться по ней с помощью атрибута tabindex. Я хочу создать порядок табуляции таким образом, чтобы, когда он встречает последнее поле и выходит из него, он перемещает фокус на первое поле в форме. В настоящее время фокус теряется после выхода из последнего поля.
Я сжал проблему до простого примера HTML ниже. Циклический порядок, в котором должна перемещаться вкладка, - текстовое поле1 -> текстовое поле2 -> радиокнопка -> текстовое поле4 -> текстовое поле1 и так далее.
<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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вам нужно выйти из поведения браузера по умолчанию и использовать что-то вроде JQuery для обработки фокусировки полей, что-то простое, как показано ниже, должно работать, просто помните о любых потенциальных проблемах с доступностью, которые вы можете вызвать.
$( "#txt3" ).blur(function() {
$( "#txt1" ).focus();
});
он не устанавливает фокус на первое текстовое поле.
По какой-то причине это сработало для меня, только если я установил фокус в конце стека вызовов.
$('#lastInLoop').blur(function() {
setTimeout(() => { $('#firstInLoop').focus() }, 0);
});
Я считаю, что этот хакер - ужасная идея. Но это решило мою проблему, и я не работаю в НАСА, так что ...
Использование
tabindexсо значением больше 0 - это настоятельно не рекомендуется. dequeuniversity.com/rules/axe/3.2/tabindex