JavaScript Examples Bible - UserWorks Technologies

46 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
elementObject.tabIndex
When you load the page, the default tabbing order for the lab form control elements
(default setting of zero) takes charge. If you start pressing the Tab key, the
precise results at first depend on the browser you use. In IE, the Address field is
first selected; next the Tab sequence gives focus to the window (or frame, if this
page were in a frameset); finally the tabbing reaches the lab form. Continue pressing
the Tab key and watch how the browser assigns focus to each of the element
types. In NN6, however, you must click anywhere on the content to get the Tab key
to start working on form controls.
The sample script inverts the tabbing sequence with the help of a for loop that
initializes two variables that work in opposite directions as the looping progresses.
This gives the last element the lowest tabIndex value. The skip2() function simply
sets the tabIndex property of the second text box to -1, removing it from the
tabbing entirely (IE only). Notice, however, that you can click in the field and still
enter text. (See the disabled property earlier in this chapter to see how to prevent
field editing.) NN6 does not provide a tabIndex property setting that forces the
browser to skip over a form control. You should disable the control instead.
Listing 15-16: Controlling the tabIndex Property
tabIndex Property
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
}
}
tabIndex Property Lab
Text box no. 1:
Text box no. 2: