动态添加tabindex

Question

我想将 tabindex 添加到所有表单元素。表单是动态的，我无法将其添加到 HTML 中。我想将它作为一个函数来运行。

如果有多个同名的单选按钮，每个单选按钮都必须有自己的 tabindex 值。页面上的大多数表单元素都以 <input> ，除了 <select> 。我该如何解释？

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

 var n = 1;

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

原文由 santa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

奇怪的问题，但这是基本的想法：

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

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

原文由 Brandon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

相反，尝试将 tabindex 设置为 0 ：

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

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

:input 选择器基本上选择了所有的表单控件。

:visible 选择器基本上选择了所有可见的元素。

---

或者按照评论中的建议，如果您没有其他更改可应用于每个可见输入，那么这就足够了：

 $(':input:visible').attr('tabindex', '0');

原文由 allenski 发布，翻译遵循 CC BY-SA 4.0 许可协议