HTML - DOM Element tabIndex Property

Quiz

The HTML DOM Element tabIndex property allows you to get (retrieve) and update (set) the value of the tabIndex attribute for an HTML element.

The tabIndex is a global attribute that controls the order in which elements are focused when you navigate through the web page using the tab key.

Following are the key points about the tabIndex values −

If the "tabIndex" value is positive, it means the element should be focusable in sequential keyboard navigation.
If the "tabIndex" is negative (i.e. -1), it means the element should not be navigated directly using the Tab key.

It is recommended to use only "0" and "-1" as tabindex values and avoid using tabindex values greater than 0 and CSS properties that can change the order of focusable HTML elements.

Syntax

Following is the syntax of the HTML DOM Element tabIndex (to set the property) property −

element.tabIndex = newValue;

Where, the newValue is an integer value to change the tab order of the element.

Use the following syntax to get the tabIndex property value −

element.tabIndex;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns an integer value that holds the tab order of the element.

Example 1: Retrieving tabIndex Property

The following is the basic example of the HTML DOM Element tabIndex property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element tabIndex</title>
</head>
<body>
<h3>HTML DOM Element tabIndex Property</h3>
<p tabindex="0" id="my_ele">This is a paragraph.</p>
<p id="res"></p>
<script>
   let my_ele = document.getElementById('my_ele');
   document.getElementById('res').innerHTML = 
   "Tab index value: " + my_ele.tabIndex;
</script>
</body>
</html>

The above program retrieves the tabIndex value.

Example 2: Setting the tabIndex Property

Here is another example of using the HTML DOM Element tabIndex property. This property is used to set the tabIndex attribute to an HTML <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element tabIndex</title>
</head>
<body>
<h3>HTML DOM Element tabIndex Property</h3>
<p id="my_ele">This is a paragraph.</p>
<p>Before and after clicking the button, press the tab key to observe the 
changes.</p>
<button onclick="set_prop()">Click to set</button>
<p id="res"></p>
<script>
   function set_prop(){
      let my_ele = document.getElementById('my_ele');
      my_ele.tabIndex = 1;
      document.getElementById('res').innerHTML = "Propery has been set."
   }
</script>
</body>
</html>

The above program sets the tabIndex property of the div elements. You can verify this by pressing the "Tab" key on your keyboard before and after setting the property.

Example 3: Using the tabIndex Property to Control Focus Order

In the example below, we use the HTML DOM tabIndex property to control the focus order of the<div>element in the HTML document. When you press the tab key, it will focus each dive element accordingly to the assigned tabIndex value −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .item {
      padding: 10px;
      margin: 5px;
      border: 1px solid green;
      cursor: pointer;
      color: green;
      font-weight: bold;
   }
</style>
</head>
<body>
<h2>HTML DOM Element tabIndex property</h2>
<p>Click on any item or use the Tab key to navigate through the items.
Notice the order based on the tabIndex values...</p>
<div class="item" tabindex="1" onclick="select(1)">Item 1</div>
<div class="item" tabindex="2" onclick="select(2)">Item 2</div>
<div class="item" tabindex="3" onclick="select(3)">Item 3</div>
<button onclick="changeTabIndex()">Click to change values</button>
<p id="selitem">Selected item will appear here.</p>
<script>
    function select(itemId) {
        var s = document.getElementById('selitem');
        s.innerHTML = 'Item ' + itemId + ' selected!';
    }
    function changeTabIndex() {
    const items = document.querySelectorAll('.item');
    const arr = [1, 2, 3];
    items.forEach(item => {
        var rand = arr[Math.floor(Math.random() * arr.length)];
        item.tabIndex = rand;
        document.getElementById('selitem').innerHTML = 
		"values changed press Tab button again.";
    });
    }
</script>
</body>
</html>

Press the Tab key to see the order of focus on the div elements. Click the button to assign some random values, and then press the "Tab" key again to see the changes.

Supported Browsers

Property
tabIndex	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page