8.1 Auto-Focusing the First Text Field

NN 2, IE 3

8.1.1 Problem

You want the user to begin typing into the first text box of a form without having to physically bring focus to the box.

8.1.2 Solution

Assuming that the page always contains a form and text field with the same names, use an onload event handler to invoke the focus( ) method of the text box:

<body onload="document.formName.fieldName.focus( )">

Substitute the name of your form and text box for the two placeholders in this code.

8.1.3 Discussion

As simple as this solution is, you'll be amazed how much it helps casual users get faster results from a page's form. The Google search form uses a similar technique so that all a user needs to do is select the google.com site from the Favorites/Bookmarks list and start typing the query string. Without this scripted assistance, users of most browsers have to click on the text box or press the Tab key a couple of times to bring focus to the text box. You must wait for the page to complete its loading process before giving the text box focus, or some browsers will grab focus away from the box.

If you deliver the text box with default or sample text that is to be replaced by the user, you should also invoke the select( ) method of the box:

<body onload=
   "document.formName.fieldName.focus( );document.formName.fieldName.select( ) ">

This action also selects the text in the box, such that the next keyboard key that gets pressed removes the default text.

8.1.4 See Also

Recipe 8.4 for auto-selecting a form field that fails validation; Recipe 8.10 for auto-tabbing between text boxes with fixed-length entries.

[ Team LiB ]