tabIndex JavaScript (JS) Example: HTML DOM Objects – Button Object – tabIndex JavaScript (JS) Example

tabIndex JavaScript (JS) Example: HTML DOM Objects – Button Object – tabIndex JavaScript (JS) Example

Purpose: – Illustrates the for the .

View Other Button Object Properties

Prerequistes:

Syntax: ButtonObject.tabIndex – Allows you to access the tabbing order of a Button Object.

Restrictions: None

Notes:

  • You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

  1. Use Visual Web Developer 2008
  2. Create new web site;
    • Click File/New Web Site
    • Select ASP.NET Website Template
    • Select C-Sharp for language
    • name of Web Site could be JavaScript_Syntax.
  3. Folder

  4. Add New folder named “HTMLDOMObjects”
    • Right-click project name in solution explorer;
    • add new folder;
    • name of folder should be: HTMLDOMObjects
  5. Add New subfolder to “HTMLDOMObjects” folder named “DOMButton”
    • Right-click folder named “HTMLDOMObjects” in solution explorer;
    • add new folder;
    • name of folder should be: DOMButton
  6. Add New subfolder to “DOMButton” subfolder named “ButtonObjectProperties”
    • Right-click subfolder named “DOMButton” in solution explorer;
    • add new folder;
    • name of folder should be: ButtonObjectProperties
  7. Add HTML Page Named tabIndex to ButtonObjectProperties subfolder
    • Right-click ButtonObjectProperties subfolder;
    • add new item;
    • Select HTML Page
    • HTML Page name should be tabIndex
  8. Click on copy code in code below to copy code into HTML Page tabIndex.htm
  9. Right-click on HTML page tabIndex.htm and select view in browser
View Example In Browser
< !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 *
    ***************************************************
    -->
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton2 input
        {
        font-style :italic;        
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;"> click Buttons to change tabIndex of  button object:</div><br /><br />
         <!--using onclick to set a cookie and reload page; 
        when page is reloading, we check that cookie to assign different styles to body
        -->
 
      <input id="Button1" type="button"  class="myButtons" tabindex="1" value="button1 - tabIndex=1" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  class="myButtons" tabindex="2" value="button2 - tabIndex=2" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  class="myButtons" tabindex="3" value="button3 - tabIndex=3" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Button Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // tabIndex
       //*****************************************************
 
       //    SYNTAX:
       //    object.tabIndex="tabIndex"  Allows you to retrieve or assign tabIndex for button
 
 
       // Two ways to retrieve tabIndex
       document.write("<div style=\"border-style:solid\"><strong>Demonstrating Two Ways to Retrieve Property for Button1</strong><br />") 
 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('input')[0];
                document.write("Using getElementsByTagName: " + myObject.tabIndex);
                document.write("<br />");
            //   2. GetElementById
 
                document.write("Using getElementById: ");
                document.write(document.getElementById('Button1').tabIndex);
                document.write("</div><br />");
                document.write("<br />");
 
 
 
       // Two ways to assign tabIndex
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                    document.write("<div style=\"border-style:solid\"><strong>Demonstrating Assigning Property with GetById for Button2</strong><br />")
                    document.getElementById('Button2').tabIndex = "0"
                    document.getElementById('Button2').className = "myButton2"
                    document.getElementById('Button2').value = "button2 - tabIndex=0"
                    document.write("Button2 tabIndex changed to tabIndex=0: " + document.getElementById('Button2').tabIndex + "</div><br />");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    document.write("<div style=\"border-style:solid\"><strong>Demonstrating Assigning Property with GetElementsByTagName for Button3</strong><br />") 
                    myThirdButton = document.getElementsByTagName('input')[2];
                    myThirdButton.tabIndex = "5";
                    myThirdButton.className = "myButton3"
                    myThirdButton.value = "button3 - tabIndex=5"
                    document.write("Button3 tabIndex changed to tabIndex=5: " + myThirdButton.tabIndex + "</div>");
 
                }
 
 
 
 
   </script>
 
  </body>
</html>