Създайте ред на раздели в затворен цикъл в 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 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