Question

我正在使用Telerik控件，特别是数字文本框，您可以在其中设置上下箭头以增加/减少文本框中的值。我需要设置标签顺序以移动到下一个字段，但由于上下箭头上有一个按钮，浏览器将首先浏览这些按钮，然后移动到下一个文本框字段。

如何设置jquery来检测下一个可见的文本框/下拉/输入字段，并按下标签按钮而不是通过它附近的按钮来移动它？

Answer 1

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

Answer 2

实际上，您可以使用HTML属性tabindex对页面上的所有输入按数字顺序进行设置。因此，要跳过按钮，请从页面上的第一个输入开始，为其分配tabindex=1，第二个tabindex=2，相应地设置后续输入。当你到达你想要跳过的按钮时，不要给它们一个tabindex值，或者在列表的末尾给它们索引。

Answer 3

你也可以尝试这个

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

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>

如何在jquery中设置Tab键顺序

4 个答案: