lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at klenwell.com/press.
Wednesday, November 02, 2005
JS: focus first field
Need a simple javascript function to focus a form on the first (text) field. Here's how Google does it:

function sf(){document.f.q.focus();}


Then, in the body tag:

<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b
alink=#ff0000 onLoad=sf() topmargin=3 marginheight=3>


But their form is simplicity itself. With my wizard, it's not possible to refer to a document object by name as Google does.

A number of different function already out there to choose from. I settled on a hybrid of two different functions.

This one required the form be passed by name as an argument. It then cycles through the fields of the form and applies focus to the first field that is not hidden, disabled, or read-only:

function f_setfocus( aForm )
{
if( aForm.elements[0]!=null) {
var i;
var max = aForm.length;
for( i = 0; i < max; i++ ) {
if( aForm.elements[ i ].type != "hidden" &&
!aForm.elements[ i ].disabled &&
!aForm.elements[ i ].readOnly ) {
aForm.elements[ i ].focus();
break;
}
}
}
}


The problem is the argument. I want it to be argument-free and simply take the first qualified form field on the page -- even if there are multiple forms.

This one finds the first editable text, textarea, or s* (submit?) field in a form on the page:

function placeFocus() {
if (document.forms.length > 0) {
var field = document.forms[0];
for (i = 0; i < field.length; i++) {
if ((field.elements[i].type == "text") || (field.elements[i].type == "textarea") || (field.elements[i].type.toString().charAt(0) == "s")) {
document.forms[0].elements[i].focus();
break;
}
}
}
}


But it assumes that it will be the first form on the page (and thus would miss if the first form did not have an editable field.)

So I adopted what I thought were the advantages of each function and rolled my own:

<script type="text/javascript">
<!--
function select_first_field()
{
// *** DATA

var focus_is_set = false;
var num_forms = document.forms.length;
var i, j;

// *** MANIPULATE

// sanity check
if ( num_forms < 1 )
{
return;
}

// cycle forms
for ( i = 0; i < num_forms; i++ )
{
var this_form = document.forms[i];

// cycle fields
for ( j = 0; j < this_form.length; j++ )
{
// skip hidden, disabled, read-only fields

// verify text, textfield, s*
if ( (this_form.elements[j].type == "text" ) || ( this_form.elements[j].type == "textarea" ) || ( this_form.elements[j].type.toString().charAt(0) == "s" ) )
{
// skip disabled, read-only
if ( !this_form.elements[j].disabled && !this_form.elements[j].readOnly )
{
focus_is_set = true;
document.forms[i].elements[j].select();
break;
}
}
}

// check focus flag
if ( focus_is_set == true )
{
break;
}
}

// *** RETURN

return;

} // end fx
// -->
</script>


Viola! Finds the first text field that is not disabled, etc., in a form and selects it. Not extensively tested, but worked on the first page I threw it on.

A more sophisticated function that account for slow-loading pages can be found here:

Man in Blue's 78-line javascript focus function


(Fresh off the presses!) However, I don't anticipate any of my pages being that slow.
» add your comment