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>CSS:
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 });