Create a Closed loop tab order in html controls

Question

I have several fields in an html form and I desire to navigate through it using the tabindex attribute. I wish to create the tab order in such a way that when it encounters the last field and tabbed out, it moves focus to the first field in the form. Currently the focus is getting lost after tabbing out of the last field.

I have condensed the issue into a simple html example below. The cyclic order in which the tab should move is textbox1 -> textbox2 -> radiobutton -> textbox4 -> textbox1 and so on.

<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/>

Answer 1

you need to break out of the browser default behaviour and use something like JQuery to handle the focusing of the fields, something simple like the below should work, just be aware of any potential accessibility issues you may be causing.

$( "#txt3" ).blur(function() {
  $( "#txt1" ).focus();
});

Answer 2

For whatever reason, this only worked for me if I set focus at the end of the call stack.

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

I assume this hack is a terrible idea. But it solved my issue and I don't work for NASA, so...