Progress Monitor for IdealProgrammer.com

Take Swift, Intelligent, Massive, Planned, Loving, Effective (S.I.M.P.L.E.) Action to Transform Self into Ideal

Skip Repetitive Navigational Links

Home

News

Presenters

Contact

Please login

JavaScript (JS) tabIndex Example

Description: Illustrates the JavaScript syntax for the Anchor Object tabIndex Property .

Syntax: object.tabIndex=Index – Allows you to retrieve or assign tabbing order for objects.

JavaScript (JS) tabIndex Example Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: tabIndex </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
    -->
 
 
 
   </head>
  <body>
      <input id="Button1" type="button" tabindex="2" value="Button1" /><br /><br />
      <input id="Button2" type="button" tabindex="1" value="Button2" /><br /><br />
      <input id="Button3" type="button" tabindex="0" value="Button3" /><br /><br />
      <input id="Button4" type="button" tabindex="3" value="Button4" /><br /><br />
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Anchor Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // tabIndex
       //*****************************************************
 
       //    SYNTAX:
       //    object.tabindex="index"  Allows you to retrieve or assign  
       //               the tabbing order for an object
 
       // Two ways to retrieve accessKey   
       //   1. GetElementsByTagName
       myObject = document.getElementsByTagName('input')[0];
       document.write("Button1  Using getElementsByTagName : " + myObject.tabIndex);
       document.write("<br />");
       //   2. GetElementById
       document.write("Button2  Using getElementById: ");
       document.write(document.getElementById('Button2').tabIndex);
 
       document.write("<br /><br />");
       // Two ways to assign accessKey
 
       //   1. GetElementById
       myThirdButton = document.getElementById('Button3');
       myThirdButton.tabIndex = "3";
       document.write("<br />Button3 tabIndex changed to 3: ", myThirdButton.tabIndex);
 
       //   2. GetElementsByTagName      
       myFourthButton = document.getElementsByTagName('input')[3];
       myFourthButton.tabIndex = "0";
       document.write("<br />Button4 tabIndex changed to 0: ", myFourthButton.tabIndex)
 
</script>
 
  </body>
</html>