Controlling the tab Index Property : JavaScript DHTML examples (example source code) » Form Control » Focus Tab

JavaScript DHTML
C++
Java Products
Java Articles
JavaScript DHTML Home  »   Form Control   » [  Focus Tab  ]   
 



Controlling the tab Index Property

Please note that some example is only working under IE or Firefox.



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>tabIndex Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function invert() {
    var form = document.lab
    for (var i = 0, j = form.elements.length; i < form.elements.length; 
i++, j--) {
        form.elements[i].tabIndex = j
    }
}
function skip2() {
    document.lab.text2.tabIndex = -1
}
function resetTab() {
    var form = document.lab
    for (var i = 0; i < form.elements.length; i++) {
        form.elements[i].tabIndex = 0
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>tabIndex Property Lab</H1>
<HR>
<FORM NAME="lab">
Text box no. 1: <INPUT TYPE="text" NAME="text1"><BR>
Text box no. 2: <INPUT TYPE="text" NAME="text2"><BR>
<INPUT TYPE="button" VALUE="A Button"><BR>
<INPUT TYPE="checkbox">And a checkbox
</FORM>
<HR>
<FORM NAME="control">
<INPUT TYPE="button" VALUE="Invert Tabbing Order" TABINDEX=-onClick="invert()"><BR>
<INPUT TYPE="button" VALUE="Skip Text box no. 2 (IE Only)" TABINDEX=-
onClick="skip2()"><BR>
<INPUT TYPE="button" VALUE="Reset to Normal Order" TABINDEX=-onClick="resetTab()">
</FORM>
</BODY>
</HTML>
Related examples in the same category
1.  Focus Next Control








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.