Entry
How can I set/change the tabbing order of form elements?
how do i keep the intermittent onblurr loop from occuring in netscape with this solution ?
Feb 25th, 2000 09:43
Martin Honnen, Ed Barbuti,
Usually FORM elements are tabbed trough in source order. HTML 4 however
introduced the
TABINDEX
attribute for FORM elements so you can specify a tab index for every
FORM element e.g.
<INPUT TABINDEX="5">
This attribute is supported only by IE4/5 and NN6. With NN4 you can
setup an array of form elements defining the tab order and use the
onblur handlers to enforce the desired tabbing by focussing on the next
element in the array. Note however that using onblur places undesired
limitations on your users (it fires not only when the user tabs but
also select another window with the mouse) so use this solution with
care:
<HTML>
<HEAD>
<SCRIPT>
var tabElements;
var activeElement = 0;
function initTabElements (elements) {
if (!document.all && !document.getElementById) {
tabElements = elements;
for (var e = 0; e < tabElements.length; e++) {
tabElements[e].tabIndex = e;
tabElements[e].onblur = tabNextElement;
}
tabElements[0].focus();
}
}
function tabNextElement () {
java.lang.System.out.println(this.name + ': ' + this.tabIndex);
if (this.tabIndex == activeElement) {
activeElement = (this.tabIndex + 1) % tabElements.length;
tabElements[(this.tabIndex + 1) % tabElements.length].focus();
}
}
</SCRIPT>
<SCRIPT>
function prepareTabbing () {
// define your elements array for NN4 here
var form = document.aForm;
var tabElements = new Array (form.field1, form.field3, form.field2,
form.field4);
initTabElements (tabElements);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="prepareTabbing();">
<FORM NAME="aForm">
<INPUT TYPE="text" NAME="field1" TABINDEX="1">
<INPUT TYPE="text" NAME="field2" TABINDEX="3">
<BR>
<INPUT TYPE="text" NAME="field3" TABINDEX="2">
<INPUT TYPE="text" NAME="field4" TABINDEX="4">
</FORM>
</BODY>
</HTML>
