79

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.

Piper
  • 1,266
  • 3
  • 15
  • 26
RVK
  • 935
  • 1
  • 12
  • 18

5 Answers5

122
document.getElementById("link3").tabIndex = 6;
hunter
  • 62,308
  • 19
  • 113
  • 113
  • 7
    $('#link3').attr( 'tabIndex', 6 ); // for jQuery – marklark Jul 31 '14 at 18:10
  • 6
    The attribute is `tabindex` but `el.tabindex` doesn't work, however `el.tabIndex` does. So weird. – Bill Criswell Feb 12 '17 at 03:44
  • 2
    @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 – Luke Schunk May 07 '19 at 21:58
  • 2
    This is a working alternative in 2020. `document.getElementById("link3").setAttribute("tabindex", "6");` – edjohnsonwilliams Jun 19 '20 at 13:03
9

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++;
        }
    });
});
Morteza Tourani
  • 3,506
  • 5
  • 41
  • 48
Nikz
  • 1,346
  • 1
  • 18
  • 24
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.

Community
  • 1
  • 1
Serge Stroobandt
  • 28,495
  • 9
  • 107
  • 102
  • 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 https://webaim.org/techniques/keyboard/tabindex at the bottom. – GrahamTheDev Feb 19 '20 at 07:55
  • @GrahamRitchie If you cite , 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." – Serge Stroobandt Jun 11 '20 at 21:32
1

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>')
})
    });
ShapCyber
  • 3,382
  • 2
  • 21
  • 27
1

Some useful JS:

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

}

element.setAttribute('tabindex', '-1');
Andrew
  • 5,839
  • 1
  • 51
  • 72