In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > tabIndex

tabIndex property

Browser support:

Specifies or returns the tabbing order for keyboard navigation using the TAB key.

The default tabbing order matches the source order in the markup, with tabIndex you can change this order. The browser will tab to the elements in ascending order.

The another effect of the tabIndex property is that if it is specififed, the element can be active (can have focus). Most of the HTML elements cannot be active by default (div, span, ...), but if the tabIndex property is set on them, they can be active.

Syntax:

object.tabIndex;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: tabIndex

Possible values:

Integer that sets or retrieves the position of the element in the tabbing hierarchy. Default: 0. If the value is a negative number, the element will be removed from the tabbing hierarchy.

Default: 0.

Example HTML code 1:

This example illustrates the use of the tabIndex attribute:

<input type="text" tabindex="1" value="Use the" />
<input type="text" value="TAB key" />
<input type="text" tabindex="2" value="to navigate" />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the tabIndex property:

<head>
    <script type="text/javascript">
        function ChangeTab () {
            var inputs = document.getElementsByTagName ("input");
            inputs[0].tabIndex = 3;
            inputs[1].tabIndex = 2;
            inputs[2].tabIndex = 1;
        }
    </script>
</head>
<body>
    <input type="text" tabindex="1" value="Use the" />
    <input type="text" value="TAB key" />
    <input type="text" tabindex="2" value="to navigate" />

    <button onclick="ChangeTab ();">Change tabbing order!</button>
</body>