Focusing on Form Elements with jQuery

There would be times you would want to offer your users an indication of the current form element they are on. A simple, non intrusive manner for this would be as simple as changing the background of the element using CSS. Users who are using their keyboard to move through the form elements would also benefit from this as it provides a more obvious cursor position.

Fortunately, there are several ways to get this effect. First, you just use CSS. By appending the :focus selector to your form element declaration in your CSS code, your work is done. Unfortunately, not all modern browsers comprehend :focus – especially not the big boys like IE. So, how shall we do it?

First, download a copy of jQuery’s base library. You will need the library to use the following code.

function focusFields(){
   $("input, textarea, select").bind("focus",function(){
         $(this).addClass("focus");
   });

   $("input, textarea, select").bind("blur",function(){
         $(this).removeClass("focus");
   });

   if($.browser.msie){
	$("select").bind("focusin",function(){
	   $(this).addClass("focus");
	});	

	$("select").bind("focusout",function(){
	   $(this).removeClass("focus");
	});
   }
}

What the code above does is essentially loop through your documents gathering all the input elements, textarea elements and select elements. Then, when the form element is focused on, a class called focus is added to the that particular element. Don’t worry if you already have other class attributes added to the form elements. This code merely appends a new class, so your existing layout will not be compromised. When focus is moved from that element, the class is removed. Be sure to create a class with that name in your stylesheet. You can also use any other class names, just make sure to change the code above to reflect your new naming scheme.

You will notice an if statement in the code above. The statement just checks for any IE browser and applies a proprietary event for select elements in it. I had to use the little bit of proprietary code as there is a little bug in IE7 that causes the select element to only expand after two clicks. It seems as if the first click pushes the focus to the select element and the second click expands the options. However, this issue does not exists in IE6. If you prefer, you could also narrow down the the browser check to only target IE7.

Download the sample code here.