How to Change the Tab Focus for Javascript

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Change the Tab Focus for Javascript
You can change the tab order of Web page elements. (typing #3 image by Adam Borkowski from Fotolia.com)

Web pages have controls such as text boxes, drop-down boxes and buttons. When users visit your site, they can move through these controls by pressing the tab key. Each control has a tab index. This index determines the order in which the tab key moves. For example, if you change the tab index of the last button on the page to one, users will tab to that control first when they press the tab key. Using JavaScript, you can change tab focus so that the cursor moves in the order that you define in your code.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Open your Web page using Notepad or your HTML editor.

  2. 2

    Add this code to the <body> section of the HTML document:

    <div>

    <input id="Text1" type="text" />

    <input id="Text2" type="text" />

    <input id="Text3" type="text" />

    <input id="Text4" type="text" />

    </div>

    <input id="changeTabFocus" type="button" value="Change Tab Focus" tabindex="-1" onclick="changeTabFocus()" />

    This creates four text boxes and a button. By default, the tab order of the text boxes is one, two, three and four. When the Web page opens, the cursor will tab to the boxes in that order. The button calls a JavaScript function that changes the tab order.

  3. 3

    Add the following JavaScript code to the "<head>" section of the document:

    <script type="text/JavaScript">

    function changeTabFocus() {

    // FIRST LINE

    var elementToChange = "Text2";

    // SECOND LINE

    var newTabIndex = 1;

    // THIRD LINE

    var elementToChangeObject = document.getElementById(elementToChange);

    // FOURTH LINE

    elementToChangeObject.tabIndex = newTabIndex;

    }

    </script>

    The button calls this function. The first line sets the variable "elementToChange." In this example, you will reset the tab index of the second text box (Text2). The second line sets one as that tab index. The third line gets a reference to the second text box. The fourth line changes the tab index of the text box to one. This will change the tab order to four, one, two and three because the second text box will gain focus first.

  4. 4

    Save the document. Open Windows Explorer and locate the file. Double-click it. Your browser will open it. Position your cursor in the browser's address bar.

  5. 5

    Press the "Tab" key until the cursor moves to the first text box. Continue pressing the "Tab" key. The cursor will move to the text boxes in the default order: one, two, three and four.

  6. 6

    Position your cursor in the browser's address bar.

  7. 7

    Click the "Change Tab Focus" button. It will call the JavaScript function. The function will reset the tab focus so that the second text box gains focus first.

  8. 8

    Press the tab key until it moves to the text boxes. Note that it moves to the second text box first and skips the first text box.

  9. 9

    Press the tab key and note that it moves to the third text box, the fourth text box and then to the first text box. The new tab order is now four, one, two and three.

Tips and warnings

  • Change the tab focus of any page element by using this JavaScript. Replace "Text2" with the ID of the element that you want to change. For example, if you want to change the tab focus of a button named "MyButton," replace "Text2" with "MyButton" in the first line of JavaScript code. Set the new tab index in the second line of code.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.