动态添加tabindex

Question

我想将tabindex添加到所有表单元素.表单是动态的,我无法将其添加到HTML中.我想将它作为一个函数运行.如果有多个具有相同名称的单选按钮,则每个单选按钮都必须具有自己的tabindex值.页面上的大多数表单元素都以INPUT开头,SELECT除外.我该如何解释？

我想我需要运行一个循环并添加属性,对吧？

var n = 1; 

$('input, select').each(function() {               
    $(this).attr('tabindex', n++);
});

Answer 1

奇怪的问题,但是这是基本的想法:

$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });

这使用:输入来获取包括按钮和文本区域在内的所有内容.:not(:hidden)只会排除隐藏的输入以避免不必要的标签.

$(":input:not(:hidden)").each(function(i){$(this).attr('tabindex',i + 1);}); 甚至会更好,因为除了taborder也会让你通过隐藏的字段标记! (18认同)
嗯,它看起来像jQuery的确实保证顺序是文档顺序:http://stackoverflow.com/questions/1636201/is-the-order-objects-are-return-by-a-jquery-selector-specified (4认同)
为什么这很奇怪？有些浏览器在同一组的无线电按钮上有标签问题...谢谢. (2认同)

Answer 2

可能最好避免n++设置不同的tabindex数字.

相反,尝试设置tabindex为0:

$(':input:visible').each(function() {               
    $(this).attr('tabindex', '0');
});

tabindex="0"表示元素应该在顺序键盘导航中可聚焦,但其顺序由文档的源顺序定义. ~developer.mozilla.org

所述:input选择器基本上选择所有表单控件.

所述:visible选择器选择基本上是可见的所有元素.