Question

我有一个html格式的几个字段，我希望使用tabindex属性浏览它。我希望以这样一种方式创建跳位顺序：当遇到最后一个字段并跳出时，它将焦点移到表单中的第一个字段。当前，在跳出最后一个字段之后，焦点就消失了。

我已将问题压缩到下面的简单html示例中。标签应以的循环顺序为 textbox1-> textbox2->单选按钮-> 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 工作，所以...

在html控件中创建闭环选项卡顺序

2 个答案: