How To Enhance Your Form Input Fields with jQuery

jQuery makes it easy to spice up our search bars and form input fields with simple touches that really enhances the user’s experience. Let’s look at how jQuery can be used to show/hide a default value inside a field and provide visual user feedback when the field is selected.

The example we’ll be creating features a simple search bar and icon which appears grey as standard but turns to a cool blue when focused. By default the input displays the words I’m looking for…, which disappears when the field is selected.

Creating the search form

1	<form action="" method="get">
2	    <fieldset>
3	        <input type="text" id="searchbar" />
4	        <input type="submit" value="Search" id="searchbtn" />
5	    </fieldset>
6	</form>

01	#searchbar {
02	    width: 425px;
03	    float: left; padding: 20px 150px 20px 40px;
04	    background: #ededed url(bar-bg.png) repeat-x;
05	    border: 3px solid #c7c7c7;
06	    border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;
07	    font: italic 54px Georgia; color: #898989;
08	    outline: none; /*Remove Chrome and Safari glows on focus*/
09	}
10	 
11	#searchbar.active {
12	    background: #ebf3fc url(bar-bg-active.png) repeat-x;
13	    border: 3px solid #abd2ff;
14	}
15	 
16	#searchbtn {
17	    width: 67px; height: 70px; float: left; margin: 18px 0 0 -115px;
18	    background: url(search.png); text-indent: -9999px;
19	    padding: 0 0 0 67px; /*IE fix*/
20	    cursor: pointer;
21	}
22	    #searchbtn:hover {
23	        background-position: 0 -70px;
24	    }

JS:

01	$(document).ready(function() {
02	    $("#searchbar").attr("value", "I'm looking for...");
03	 
04	    var text = "I'm looking for...";
05	 
06	    $("#searchbar").focus(function() {
07	        $(this).addClass("active");
08	        if($(this).attr("value") == text) $(this).attr("value", "");
09	    });
10	 
11	    $("#searchbar").blur(function() {
12	        $(this).removeClass("active");
13	        if($(this).attr("value") == "") $(this).attr("value", text);
14	    });
15	});

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…

jQuery slideViewerPro: A “pro” jQuery image slider

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstandin…

jQuery Optimization: Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability …