Resources: Form Field Highlighting with jQuery

Click on any of the input or textarea fields below and you'll see that they change color when they are selected for input. This is a great little touch to add to a site for usability. Highlighting the field that is currently selected for input is a quick way to let the user know where they are on the page and helps them not to enter the wrong information into the wrong field.

Example

Field 1:

Field 2:

A Text Area:


Explanation

This script is super easy to implement, especially if you're already using jQuery on your website.

Add the following to your CSS document for the page/site:

/* form highlighting */
.focused {
background: #ddeff6;
border: 1px solid #0099d4;
padding: 2px;
}

select.focused {
padding: 0px;
}

Next, add the jQuery script library to your website if it isn't already there. You can find out more about jQuery and how to add it to your website at http://jquery.com/.

Then create a new javascript file to your site, and add the following code to it:

$(document).ready(function(){
//global vars
var searchBoxes = $("input");
var textAreas = $("textarea");

//Add highlighting to form elements on focus
searchBoxes.focus(function(e){
$(this).addClass("focused");
});
searchBoxes.blur(function(e){
$(this).removeClass("focused");
});

textAreas.focus(function(e){
$(this).addClass("focused");
});
textAreas.blur(function(e){
$(this).removeClass("focused");
});

});

This script works by detecting whether an input or textarea form element is the current focus and then applies a different css class to it if it is creating the highlight effect, when something else is focused the css class is removed, returning the element to its normal appearance.

This script was originally written by Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro of www.yensdesign.com. You can see their original article here.