动态添加tabindex

Question

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

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

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

var n = 1; 

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

Answer 1

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

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

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

Answer 2

为了设置不同的tabindex数字，最好避免使用n++。

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

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

tabindex="0"意味着元素在连续的键盘导航中应该是可聚焦的，但它的顺序由文档的源顺序定义。~ developer.mozilla.org

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

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

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

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

Answer 3

在这里，我描述了如何通过jquery动态添加aria-selected和tabindex值。我还想看看辅助功能如何与tablist、tab和tab面板角色一起工作，以及attributes work.Hope如何帮助此代码：

 var $tabs = $('.tabs');
 var $panels = $('.panel');

 $tabs.on('click', 'a', function (e) {
 e.preventDefault();
  var id = $(this).attr('href');

  // Find the currently visible tab and panel and hide them
$tabs.find('[aria-selected="true"]').attr({
            'aria-selected': false,
            'tabindex': -1
        });
   $(this).attr({
            'aria-selected': true,
            'tabindex': 0
        });
});

制表符包装：-

<ul class="tabs" role="tablist">
  <li role="presentation"><a href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a></li>
  <li role="presentation"><a href="#tab-2" role="tab" aria-controls="tab-2">Tab 2</a></li>
  <li role="presentation"><a href="#tab-3" role="tab" aria-controls="tab-3">Tab 3</a></li>
</ul>

<div class="tab-panels">
  <div class="panel" id="tab-1" role="tabpanel" aria-hidden="false">…</div>
  <div class="panel" id="tab-2" role="tabpanel" aria-hidden="true">…</div>
  <div class="panel" id="tab-3" role="tabpanel" aria-hidden="true">…</div>
</div>