在HTML控件中创建一个封闭的循环选项卡顺序

Question

我有几个字段，我希望使用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/>

Answer 1

您需要脱离浏览器默认行为并使用诸如jQuery之类的东西来处理域的聚焦，如下所示，请注意，请注意任何潜在的可访问性问题您可能正在造成。

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

Answer 2

出于何种原因，只有我将重点放在呼叫堆栈的末端时，这只会对我有用。

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

我认为这个黑客是一个可怕的主意。但这解决了我的问题，我不为NASA工作，所以...