我可以在 JavaScript 中动态设置 tabindex 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3772438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I dynamically set tabindex in JavaScript?
提问by RVK
Is there any attribute like tab-index?
有没有像tab-index这样的属性？
CONTEXT : I'm making a section in a web form visible or invisible depending on some condition where I want to set the tab-index manually when that particular section is visible.
上下文：根据我想在该特定部分可见时手动设置选项卡索引的某些条件，我正在使 Web 表单中的一个部分可见或不可见。
回答by hunter
document.getElementById("link3").tabIndex = 6;
回答by Nikz
Using JQuerywe can set tab index dynamically easily
Try this code- set the tabindexand increment the variable
使用JQuery我们可以轻松地动态设置标签索引试试这个代码-设置tabindex并增加变量
$(function() {
var tabindex = 1;
$('input,select').each(function() {
if (this.type != "hidden") {
var $input = $(this);
$input.attr("tabindex", tabindex);
tabindex++;
}
});
});
回答by ShapCyber
Dynamically create and reset tabIndex of an HTML elements.
动态创建和重置 HTML 元素的 tabIndex。
The tabindex attribute specifies the tab order of an HTML element, such as set of "li","a" e.t.c. The tabindex attribute is supported in all major browsers.
tabindex 属性指定了一个 HTML 元素的 Tab 键顺序，例如“li”、“a”等的集合。所有主流浏览器都支持 tabindex 属性。
For this instance let set tabindex for list items "li". Usually tabindex will start from '0', however we can reset it to start from '1'. I am using Jquery to do this.
对于这个实例，让我们为列表项“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>')
})
});
回答by Serge Stroobandt
Dynamically setting tabindex = "-1"for readonlyinputs
动态设置tabindex = "-1"为readonly输入
That is an interesting question; the more that CSS support is stillnot available.
这是一个有趣的问题；越是CSS 支持仍然不可用。
Here is how tabindexcan be set to -1for all readonlyinputelements:
以下是如何为所有元素tabindex设置-1为readonlyinput：
NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;
document.querySelectorAll('input[readonly="readonly"]').forEach(x => x.tabIndex = -1);
The first line ensures that the NodeListclass is extended with the forEachmethod. This is further explained here.
第一行确保NodeList使用forEach方法扩展类。这将在此处进一步解释。
