Check the example page (Update: Unfortunately this site is long gone. Sorry for the inconvenience!) or script if you want to get right to the action. Update: Unfortunately this site is no longer publicly available. Sorry for the inconvenience!

Context

JavaScript is sort of the Big Bad Wolf at work, and with good reason. The system we're working on has been in production since ~1995, the really bad old days of browser incompatibilities. The web standard nirvana is not here yet, but at least the browsers are now supporting a reasonable subset of JavaScript. So a little experimenting is now under way...

Problem

There are two kinds of form focus which are interesting:

  • Being able to focus an element specified by the ID attribute, if it exists
  • Being able to focus the first "input", "select", or "textarea" element which is not hidden or disabled

It would also be nice to specify that these are only relevant providing:

  1. There are no elements with non-default values
  2. No other element is already focused

Googling

I'm a complete beginner in JavaScript, but there were several scripts out there available for the googling. First off I found something to "Set Focus to First Input on Web Page" by John Stanfield. Nice and simple, but only doing half the job. Then an article and script by The Man in Blue seemed to solve the rest. At this point the final requirements started to crystallize, as a combination of what either of the scripts solved.

Solution

After messing about with the scripts a couple hours, I managed to combine them. The resulting script has only one entry function, "focus(elementID)", which works as follows:

  1. If the element ID is found, this will be focused
  2. If the element ID is not found, nothing will be focused, effectively disabling the script
  3. If the "elementID" parameter is unspecified, the first relevant form element will be focused

I've only tested the solution in IE 6.0 and Firefox 1.5, but it doesn't generate any exceptions in any of them.

Problems

The focus check doesn't work in Firefox.

Usage

Just include the following in your <head> element: <script type="text/javascript" src="focus.js"></script>, and add the following to the "onload" attribute of your <body> element: focus('firstname');. Or you can just check out the example page. Update: Unfortunately this site is long gone. Sorry for the inconvenience!

Update February 23rd, 2006: There are some problems with the site, which means that an old version of the script is in use, and it doesn't work in IE6. Hopefully Nuxit (Update: sorry, the link is dead) will be able to fix it soon. Check out the CVS version (Update: sorry, the site is no longer publicly available) to see the correct contents. Sorry for the inconvenience...