• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

8. Dynamic Forms > 8.1. Auto-Focusing the First Text Field

Auto-Focusing the First Text Field

NN 2, IE 3

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.

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.

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.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint