Automatic cursor placement in a form field |
|
When I click onto an online form, I often see a blinking cursor appear automatically in the first field of the form. This is generally a good idea, because it saves me reaching for my mouse.
Automatic cursor placement can be accomplished with a single line of code. The prevailing implementation looks like this:
<body onload="document.forms['myForm'].elements['firstField'].focus()">
But there are some problems to watch out for.
Is the automatic cursor placement expected and appropriate?
Automatic cursor placement is often a good idea. It's great for simple web search (Google or Search.Yahoo.com) and it's fine for wizards (a.k.a. multi-page forms).
When I'm creating a new form, my main concern is to do what's expected. Here are some questions that I ask.
- Is there an obvious starting place in the form? Often there's not. Examples:
- The first field is not a text box.
- The first field is a text box, but it is not a required field.
- The first field has pre-filled text which the user does not need to change. (This happens in a login form, where the system "remembers" the username from a previous session.)
- Is there a top nav with hyperlinks, that a user would consider equally important to the form below? (Example: a portal site's index page.) A mobility impaired user who uses the Tab key to access the top nav hyperlinks will not appreciate the automatic selection.
- Is the page likely to be a user's default homepage, and is it something other than pure web search? (Example: An ISP's preinstalled user homepage.) In this case, the default browser behavior of putting focus on the browser Address bar is more important than highlighting any particular form field.
And people wonder why the general public continue to type "www.ebay.com" into Google. Guess what - the search box is auto-selected!
onLoad is too slow
Another technical "gotcha" is that the onLoad handler waits until all the images have loaded before firing. Over a slow connection, this can prevent the desired behavior. And in a login form, that minor bug can become a bit more serious.
Login bugResult: As I type my password, it appears in the 'user' field instead of the 'password' field. The guy looking over my shoulder can read my password.
- Browsing over a modem connection, I click a hyperlink and arrive at the login page.
- As the page begins to load, the 'user' and 'password' fields quickly appear.
- I click the 'user' field and type my user ID.
- I tab to the 'password' field (but have not yet typed the password).
- Just at this moment, the images on the page finish loading, and the 'onload' handler fires.
A better Automatic Cursor
For the technical problem, there is a two pronged solution. (1) Make the cursor appear faster; and (2) don't mess with the cursor once the user has clicked anywhere on the form.
To address the technical and usability issues, I've written this improved implementation of automatic cursor placement.
...But if that seems too complicated, then you can simply put the regular focus() command inside the document (before the closing BODY tag), instead of in the onLoad handler.
 |
|||||||||
|
|||||||||
 |
