Создайте порядок табуляции замкнутого цикла в элементах управления 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/>

Источник

2 ответа

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

$( "#txt3" ).blur(function() {
  $( "#txt1" ).focus();
});
Источник

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

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

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

Источник
Другие вопросы по тегам