Automatically activating a form field with JavaScript

I’m a firm believer that software developers should do everything possible to make the end-user experience as simple as possible—in other words, make the software do the hard work so I don’t have to. You probably come across negative examples of this all the time without thinking twice: the web form that requires you to enter a date in a specific format; the phone number field that complains when you insert hyphens in your phone number, and the other one that complains when you don’t insert hyphens. Let the user enter their information any way they want (within reason), and let the software figure it out!

Let’s start off easy, with a short code snippet that demonstrates a very easy way to improve the usability of a web site:


// Activate form input that has class of "focus"
$(document).ready(function() {
$('.focus').focus();
})


Normally, web forms are not activated after a page is loaded—the user needs to mouse into the form and click in the first text box before they can begin typing. Including the above simple bit of jQuery JavaScript in my application lets me add the “focus” class to any form field on any page, and that field will automatically be activated when the page loads:

It’s a very small gain, but many small gains like this can significantly improve the overall end-user experience on the web.