Can I dynamically set tabindex in JavaScript?

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.


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

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