A self-contained Javascript drop-in module is defined which can not only define, but redefine HTML form control tab indexes automatically.
The Need
Webpage keyboard compliance is important. At times a web based input form defined by a programmer must be either keyboard compliant only or at least provide keyboard compatibility as well as windows mouse compatibility for page navigation. Windows based navigation alone is not enough. There are many companies in which users either do not wish to make full use of the mouse or
where their data entry folks must work across multiple machine platforms such as SAP, Mapics, J.D.Edwards, or other AS/400 Midrange green screen applications as well as Windows and browsers.
Typical midrange applications do not usually support the windows mouse and therefore users can work faster and easier by using only keyboard navigation across all applications rather than alternating between Windows and keyboard based navigations. A big part of satisfying this need is supplying the tabIndex attribute to all input boxes, select boxes, and buttons.
Method
Any form using this module must have the ID and name attribute defined for any control on it and have a legal HTML compliant form tag defined as well. The first step is to track through the form and insure all input controls on it have a name and ID tag such as:
Next, drop this module near the end of the form, inside the BODY tag:
/*============================================================================
NAME:Javascript tabindex redefinition
PURPOSE:iterating up the form controls collection,
reset all named form element tabindex to -1,
set tabindex on all qualified form elements and
place focus on the first qualified element and
add function call to onblur of last qualified element
DATE:7/28/2011
PROGRAMMER: Don Waterfield
http://www.apostolateofprayer.com
anrpgpgmr@yahoo.com
rpgivpgmr@gmail.com
NOTES:This code section can be dropped onto any valid named
HTML form with named form elements. Only the form name
needs to be specified in first code line.
to skip a form field, give it an id but no name attribute.
redefinition of tabindex only possible on named form elements
----------------------------------------------------------------------------*/
// BEGIN tabIndex redefinition
var elem = document.getElementById('frm').elements;
var firstElem = "";
var lastElem = "";
/*=====================================================
step through form elements to extract first element
-----------------------------------------------------*/
for(var i = elem.length-1; i = 0; i--)
{
// button element skipped on first element definition to allow for header elements with buttons
if((elem[i].type=="select-one")||(elem[i].type=="textarea")||(elem[i].type=="text")) {
if(elem[i].name) {
firstElem = elem[i].name;
}
}
}
/*====================================================
step through form elements to extract last element
----------------------------------------------------*/
for(var i = elem.length-1; i = 0; i--)
{
if((elem[i].type=="select-one")||(elem[i].type=="textarea")||(elem[i].type=="text")||(elem[i].type=="button")) {
if(elem[i].name) {
if(lastElem=="") {
lastElem = elem[i].name;
}
}
}
}
// in for live testing
//alert("First="+firstElem);
//alert("Last="+lastElem);
for(var i = 0; i = elem.length; i++)
{
/*======================================================
iterate form elements, resetting named, set tabindex
and focus
------------------------------------------------------*/
if(elem[i]) {
// set tabindex on qualified controls and set focus on LAST quanlified control stepping up the form
if((elem[i].type=="select-one")||(elem[i].type=="textarea")||(elem[i].type=="text")||(elem[i].type=="button")) {
if(elem[i].name!='') {
document.getElementById(elem[i].name).tabIndex=i;
if(elem[i].name==lastElem) {
// set focus to first onblur of last
document.getElementById(elem[i].name).onblur=function(){ document.getElementById(firstElem).focus(); };
//alert(lastElem);
}
if(elem[i].name==firstElem) {
document.getElementById(elem[i].name).focus();
//alert(firstElem);
}
}
} else {
// unset tabindexes if present
if(document.getElementById(elem[i].name)) {
document.getElementById(elem[i].name).tabIndex="-1";
}
}
}
}
// END tabIndex redefinition
In Closing
When the form runs, the javascript code will determine the first and last compliant control on the form and then redefine all compliant form fields tabIndex attribute to -1, effectively turning that tabIndex off. The code will then apply a tabIndex to all valid fields 1-n and apply an onblur function to the last field which will apply focus to the first field. Finally focus is initially applied to the first field for the current runtime user. This code block can be copied across any client side forms required. AJAX could be used to do this however Javascript is pure client side code whereas AJAX runs partially on the server. Using pure client side code on the client side is a more correct solution for this task. This code is available for free download (view source).
Copyright
Don Waterfield. Contact the author to obtain permission for republication.
Don Waterfield
- Whatever your programming needs are, we can make that happen.
Join the Conversation