我可以在JavaScript中动态设置tabindex吗？

是否有选项卡索引之类的属性

---

上下文：我正在使web表单中的某个节可见或不可见，这取决于我希望在该节可见时手动设置选项卡索引的某些条件。

动态创建并重置HTML元素的选项卡索引

document.getElementById("link3").tabIndex = 6;

tabindex属性指定HTML元素的选项卡顺序，例如“li”、“a”e.t.c的集合。所有主要浏览器都支持tabindex属性

对于这个实例，让我们为列表项“li”设置tabindex。通常tabindex将从“0”开始，但是我们可以将其重置为从“1”开始。我正在使用Jquery来实现这一点

苹果
火龙果
丹森
云莓
蓝莓
樱桃
黑醋栗
椰子
鳄梨
皮纳普尔

$（文档）.ready（函数（）{
变量
somefruits list=$（“ul#dfruits li”），
//将选项卡索引设置为从1开始
tabindex=0；
SomeFruitsList.each（function（））{
//向每个列表项添加选项卡索引号
tabindex++；
$（this.attr（“tabindex”，“tabindex”+tabindex）；
var tabIndex=$（this.attr（“tabIndex”）；
//将选项卡索引号作为标题添加到每个列表项中
$（this.attr（“title”，tabIndex）；
$（this）.append（“
我的tabIndex是number:”+tabIndex+“”）
})
});

使用

JQuery

我们可以轻松地动态设置选项卡索引 尝试此代码-设置

选项卡index

并增加变量

$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});

为

readonly

输入动态设置

tabindex=“-1”

这是一个有趣的问题；越是那样

以下是如何将所有

只读
输入
元素的
选项卡索引设置为
-1
：

NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;

document.querySelectorAll('input[readonly="readonly"]').forEach(x => x.tabIndex = -1);

第一行确保使用
forEach
方法扩展
NodeList
类。这是一些有用的JS:

for（让document.queryselectoral（'[tabindex]'）的选项卡化）{
}
setAttribute（'tabindex'，'-1'）；
$（'link3'）.attr（'tabIndex'，6）；//对于jquery，属性是
tabindex
，但
el.tabindex
不起作用，而
el.tabindex
起作用。太奇怪了。@BillCriswell正如您可能知道的，HTML属性是小写的，通常可以有
-
破折号。javascript属性是不同的-驼峰大小写。棘手的是dom元素通常同时具有html属性和javascript属性。html属性将镜像javascript属性。与在html中使用
class
相同，但在JavaScription中使用
className
，这是2020年的一个可行选择<代码>文档.getElementById（“link3”）.setAttribute（“tabindex”，“6”）
对于偶然发现此答案的任何人来说，这不是一个好的实践，在给出的示例（输入）中应该避免。屏幕阅读器用户应该能够访问与非屏幕阅读器用户相同的所有信息。通过在元素上设置
tabindex=“-1”
，该元素将从页面上的可聚焦项目列表中删除，并对屏幕阅读器有效隐藏
tabindex=“-1”
应仅用于最初不可聚焦的项目，以允许它们通过编程方式接收聚焦。请看下面。@GrahamRitchie如果你引用，请完整引用。以下是适用于我的特定用例的上一段：“在使用箭头键或其他快捷键的复杂小部件和菜单中，
-1
的值也可能有用。这确保了小部件中只有一个元素可以通过
选项卡
键导航，同时仍然允许在小部件中的其他组件上设置焦点。”
NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;

document.querySelectorAll('input[readonly="readonly"]').forEach(x => x.tabIndex = -1);