Can I dynamically set tabindex in JavaScript?

Question

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.

Counselor

Answer 1

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

Guaranty

$('#link3').attr( 'tabIndex', 6 ); // for jQuery – Fancie

The attribute is tabindex but el.tabindex doesn't work, however el.tabIndex does. So weird. – Possibly

@BillCriswell as you probably know, HTML attributes are lower case and can often have - dashes. javascript properties are different - camel case. the tricky thing is that dom elements often have both html attributes and javascript properties. The html properties will mirror the javascript attributes. The same as you would use class in html, but className in javascript – Mattheus

This is a working alternative in 2020. document.getElementById("link3").setAttribute("tabindex", "6"); – Speedometer

Answer 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++;
        }
    });
});

Conversion

Answer 3

Dynamically setting tabindex = "-1" for readonly inputs

That is an interesting question; the more that CSS support is still not available.

Here is how tabindex can be set to -1 for all readonly input elements:

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 NodeList class is extended with the forEach method. This is further explained here.

Robtrobust

For anyone who stumbles across this answer, this is not a good practice and should be avoided for the example given (inputs). Screen reader users should be able to access all the same information as non screen reader users. By setting tabindex="-1" on an element it gets removed from the list of focusable items on the page and effectively hidden from a screen reader. tabindex="-1" should only ever be used on items that are not focusable in the first place to allow them to receive focus programatically. see webaim.org/techniques/keyboard/tabindex at the bottom. – Figural

@GrahamRitchie If you cite <webaim.org/techniques/keyboard/tabindex>, then please, do so in full. Here is the preceding paragraph which applies to my specific use case: "A value of -1 may also be useful in complex widgets and menus that utilize arrow keys, or other shortcut keys. This ensures that only one element within the widget is navigable with the Tab key, while still allowing focus to be set on other components within the widget." – Robtrobust

Answer 4

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

Architrave

Answer 5

Some useful JS:

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

}

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

Enclitic

Answer 6

To make a whole section either selectable or not selectable, you can change the tabIndex of all its focusable children, using something like :

/**
 * Enables or disables all focusable children elements in a parent element
 * @param focusable : true/false
 */
function setFocusable(parentElementId, focusable) {
    const focusableElements = document.querySelectorAll(
        `#${parentElementId} a, #${parentElementId} button, #${parentElementId} input`
    );
    focusableElements.forEach((element) => {
        element.tabIndex = focusable ? "0" : "-1";
    });
}

Substantialize