jquery 动态添加tabindex

kx7yvsdv  于 2023-04-20  发布在  jQuery
关注(0)|答案(5)|浏览(200)

我想把tabindex添加到所有表单元素中。表单是动态的,我不能把它添加到HTML中。我想把它作为一个函数运行。
如果有多个单选按钮具有相同的名称,则每个单选按钮都必须有自己的tabindex值。页面上的大多数表单元素都以<input>开头,除了<select>。如何解释这一点?
我想我需要运行一个循环并添加属性,对吗?

var n = 1; 

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

lp0sw83n1#

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

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

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

kwvwclae

kwvwclae2#

最好避免n++设置不同的tabindex数字。
相反,尝试将tabindex设置为0

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

tabindex="0"意味着元素应该在顺序键盘导航中可聚焦,但其顺序由文档的源代码顺序定义。developer.mozilla.org
:input选择器基本上选择所有表单控件。
:visible选择器基本上选择所有可见的元素。
或者如注解中所建议的,如果您没有其他更改应用于每个可见输入,那么这应该足够了:

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

ES6更新

下面是使用箭头函数和模板文字的ES6版本的脚本:

document.querySelectorAll(':input:visible').forEach(input => {
  input.setAttribute('tabindex', '0');
});

或者我们可以使用一个单行箭头函数来设置每个input元素的tabindex属性:

document.querySelectorAll(':input:visible').forEach(input => input.setAttribute('tabindex', '0'));
11dmarpk

11dmarpk3#

在这里,我描述了如何通过jquery动态添加aria-selected和tabindex值。我还想看看可访问性如何与tablist,tab和tabpanel角色以及aria属性如何工作。希望对这段代码有所帮助:

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
        });
});

标签 Package :-

<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>
ep6jt1vc

ep6jt1vc4#

一种方法是将元素移到DOM树的更高位置。与较低的元素相比,DOM树顶部的元素将首先使用Tab键聚焦。

dpiehjr4

dpiehjr45#

无论如何,我不认为你真的需要在这里使用each循环,甚至$(this)
jQuery被配置为执行函数参数来代替普通值,并在每个循环中运行一次函数,类似于each循环的工作方式。
你可以在这里的官方jQuery文档中阅读更多关于它是如何工作的:.瓦尔(function)
因此,与使用each循环不同,您可以使用以下命令来实现相同的效果:

let n = 1;

$(':input:visible').attr('tabindex', function() { return n++; });

或者如果你可以使用现代ES6箭头函数语法-

let n = 1;

$(':input:visible').attr('tabindex', () => n++);

在这里使用() => n++而不是仅仅使用n++允许jQuery为每个示例的值运行函数,而不是接受n++的初始值并将其应用于所有匹配的元素。

相关问题