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

有没有类似 tab-index 的属性?

上下文: 我使一个部分在一个 Web 表单可见或不可见取决于一些条件,我想设置选项卡索引时,特定的部分是可见的手动。

103133 次浏览
document.getElementById("link3").tabIndex = 6;

动态创建和重置 HTML 元素的 tabIndex。

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

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

看到它在这里工作

<ul id="dfruits">
<li>Apple</li>
<li>Dragonfruit</li>
<li>Damson</li>
<li>Cloudberry</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Blackcurrant</li>
<li>Coconut</li>
<li>Avocado</li>
<li>Pinaple</li>
</ul>


$(document).ready(function() {


var
SomeFruitsList=$("ul#dfruits li"),
//set tab index to starts from 1
tabindex = 0;


SomeFruitsList.each(function() {
// add tab index number to each list items
tabindex++;
$(this).attr("tabindex","TabIndex  " +tabindex);


var tabIndex = $(this).attr("tabindex");
// add tab index number to each list items as their title
$(this).attr("title",tabIndex);


$(this).append('<br/><em>My tabIndex is number:    '+tabIndex+'<em>')
})
});

使用 JQuery,我们可以轻松地动态设置选项卡索引 尝试这个代码-设置 tabindex并增加变量

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

readonly输入动态设置 tabindex = "-1"

这是一个有趣的问题;。

下面是如何为所有 readonly input元素将 tabindex设置为 -1:

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


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

第一行确保使用 forEach方法扩展 NodeList类。

一些有用的 JS:

for (let tabbable of document.querySelectorAll('[tabindex]')) {


}


element.setAttribute('tabindex', '-1');