如何在jQuery中设置选项卡顺序

Question

我正在使用Telerik控件，具体来说是数字文本框，在其中可以设置上下箭头以增加/减少文本框中的值。我需要设置选项卡顺序以移动到下一个字段，但由于上下箭头上有一个按钮，因此浏览器将首先通过这些按钮，然后移动到下一个文本框字段。

如何设置jQuery以检测下一个可见的文本框/下拉菜单/等输入字段，并在按下选项卡按钮时移动到该字段，而不是在其附近运行按钮？

- Martin Ongtangco

Answer 1

$(function() {
  var tabindex = 1;
  $('input,select').each(function() {
     if (this.type != "hidden") {
       var $input = $(this);
       $input.attr("tabindex", tabindex);
       tabindex++;
     }
  });
});

- Vikas

Answer 2

你可以使用HTML属性tabindex来为页面上所有输入元素按数字升序排序设置它。因此，要跳过按钮，请从页面上的第一个输入元素开始，将其分配为tabindex=1，第二个为tabindex=2，并相应地设置后续输入元素。当你到达想要跳过的按钮时，只需不给它们设置tabindex值，或在列表末尾给它们设置索引即可。

- mVChr

---

确定选项卡顺序是一项非常繁琐的工作，最好由浏览器完成。如果不指定选项卡索引，它将自动获取一个值。要真正地从选项卡顺序中删除元素，请给它一个负值的选项卡索引。要启用元素的选项卡顺序，并让浏览器决定最佳索引，请给它一个零值的选项卡索引。 - Stijn de Witt

Answer 3

你也可以尝试这个。

$('input,select :visible').each(function (i) { $(this).attr('tabindex', i + 1); });

- Gautam

Answer 4

有时候在使用jQuery生成代码或重新排列元素时，解决方案不是使用taborder，而只是确保将元素按正确的顺序放入DOM中。请参见以下示例。

JQuery code::
var anchorB = jQuery('#anchorB');
jQuery('#divB').remove();
anchorB.insertBefore( "#anchorC" );


Before::
<a id="anchorB" href="#">Anchor B</a>
<a id="anchorA" href="#">Anchor A</a>
<a id="anchorC" href="#">Anchor C</a>

After::
<a id="anchorA" href="#">Anchor A</a>
<a id="anchorB" href="#">Anchor B</a>
<a id="anchorC" href="#">Anchor C</a>

- JTHouseCat