Can I dynamically set tabindex in JavaScript?

问题

Is there any attribute like 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.

回答1:

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

回答2:

Using JQuery we can set tab index dynamically easily Try this code- set the tabindex and increment the variable

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

回答3:

Dynamically create and reset tabIndex of an HTML elements.

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.

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.

See It Working Here

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

来源：https://stackoverflow.com/questions/3772438/can-i-dynamically-set-tabindex-in-javascript

标签

javascript

html

accessibility