Form Feld Focus with Unobtrusive Javascript

Posted by: Joey Marchy on Monday April 10, 2006

I’m sure half of the people that read the title bailed (designers), but for those of you who are still here (nerds & developers) lets go! The newest movement in web development is using unobtrusive JavaScript to separate your behavior (javascript) from your markup (xhtml). This is a dead simple example, but it shows the possibilities of using unobtrusive JavaScript in your projects.

What we want to accomplish is to show you how to set the focus to the first form field when the page loads, saving the user a click. In the past I would have embedded JavaScript’s onload event handler in the “body” tag and some JavaScript in the “head” tag. It might have looked something like this:

<head>
<script>
   function focusForm(){
       code here...
   }
</script>
</head>
<body onload="focusForm()">

This method works fine, but it ties the behavior to the markup. In three steps I will remove the functionality from the markup.

Step 1: Create an external file for your JavaScript function

This is similar to putting your CSS in an external file. Most people already practice putting their JavaScript in external files.

Create a file named focusForm.js and save it in a folder called scripts. Then link to the javascript file in the head of your document. By convention I am naming my external file the same as the function it contains.

<head>
<script type="text/javascript" src="scripts/focusForm.js"></script>
</head>

Step 2: Set up your form

Create your form. Make sure give the form field an “id” since we will be using the getElementById method of the DOM to hook in to the form field.

<head>
<script type="text/javascript" src="scripts/focusForm.js"></script>
</head>
<body>
<form>
<label for="username">Username</label>
<input type="text" id="username" />
</form>
</body>

Step 3: The focusForm function

We removed the “onload” event handler from the body tag, so what the hell do we do with it? We begin our external JavaScript with the following statement. Basically this says when the window loads, call the function focusForm().

window.onload = focusForm;

Our function uses the getElementById method to check if the id “username” even exists. If it does it uses getElementById to set the focus to the field username.

function focusForm(){
   if(document.getElementById("username")){
      document.getElementById("username").focus();
   } 
}

You can extend this function by branching the if statement to check for other id’s. Now you can use the function on more than one page.

if(document.getElementById("username")){
   document.getElementById("username").focus();
}  else if (document.getElementById("otherfieldname")){
   document.getElementById("otherfieldname").focus();
}

To learn more about unobtrusive JavaScript and separating markup and functionality check out the DOM Scripting book and the DOM Scripting blog

Let me know if you have questions or if you can improve this process.
email:
aim: joeymarchy

Filed under: Code, Resources