我想把tabindex
添加到所有表单元素中。表单是动态的,我不能把它添加到HTML中。我想把它作为一个函数运行。
如果有多个单选按钮具有相同的名称,则每个单选按钮都必须有自己的tabindex
值。页面上的大多数表单元素都以<input>
开头,除了<select>
。如何解释这一点?
我想我需要运行一个循环并添加属性,对吗?
var n = 1;
$('input, select').each(function() {
$(this).attr('tabindex', n++);
});
5条答案
按热度按时间lp0sw83n1#
奇怪的问题,但这是基本的想法:
这使用:input来获取包括按钮和文本区域在内的所有内容。
:not(:hidden)
只会排除隐藏的输入以避免不必要的制表符。kwvwclae2#
最好避免
n++
设置不同的tabindex
数字。相反,尝试将
tabindex
设置为0
:tabindex="0"
意味着元素应该在顺序键盘导航中可聚焦,但其顺序由文档的源代码顺序定义。developer.mozilla.org:input
选择器基本上选择所有表单控件。:visible
选择器基本上选择所有可见的元素。或者如注解中所建议的,如果您没有其他更改应用于每个可见输入,那么这应该足够了:
ES6更新
下面是使用箭头函数和模板文字的ES6版本的脚本:
或者我们可以使用一个单行箭头函数来设置每个input元素的tabindex属性:
11dmarpk3#
在这里,我描述了如何通过jquery动态添加aria-selected和tabindex值。我还想看看可访问性如何与tablist,tab和tabpanel角色以及aria属性如何工作。希望对这段代码有所帮助:
标签 Package :-
ep6jt1vc4#
一种方法是将元素移到DOM树的更高位置。与较低的元素相比,DOM树顶部的元素将首先使用Tab键聚焦。
dpiehjr45#
无论如何,我不认为你真的需要在这里使用
each
循环,甚至$(this)
。jQuery被配置为执行函数参数来代替普通值,并在每个循环中运行一次函数,类似于
each
循环的工作方式。你可以在这里的官方jQuery文档中阅读更多关于它是如何工作的:.瓦尔(function)
因此,与使用
each
循环不同,您可以使用以下命令来实现相同的效果:或者如果你可以使用现代ES6箭头函数语法-
在这里使用
() => n++
而不是仅仅使用n++
允许jQuery为每个示例的值运行函数,而不是接受n++
的初始值并将其应用于所有匹配的元素。