There is a newer ver­sion of this post avail­able called Form input field focus & blur effects

Here is some­thing I come across a lot at work so I thought I would turn it into a sim­ple tuto­r­ial for ref­er­ence to any­one out there that needs it. Basi­cally what we want to cre­ate is this:

• A search field that will dis­play a value such as “Enter your search terms here.”
• When a user clicks into that field the value will dis­ap­pear, allow­ing the user to enter there search terms.
• If a user clicks out of that search field with­out enter­ing any­thing, the default value will return to the field.

This is a sim­ple lit­tle JavaScript task, and with the help of the jQuery library, it’s even sim­pler and com­pletely unob­tru­sive. Because some­times you just want a bear bones ver­sion to work with, I’ll keep the styles to a min­i­mum on this one. Here’s how we go about doing it.

First we need to start with a basic form structure

1
2
3
4
5
6

<form id="search-form" action="">
	<label for="search-input">Click here to search</label>
	<input type="text" id="search-input" name="search-input" value="" />
	<input type="button" id="submit" value="Go" />
	<div class="clearboth"></div>
</form>

For seman­tic pur­poses, and for all those with­out JavaScript enabled, I’ve added the label attribute in there. What we’re going to do is pull the text from the label and then hide it. After that we’ll put that text into the input’s value attribute. This way if a user has JavaScript turned off they will sim­ply see a label and a search input.

jQuery Magic

Next we need to add some of that jQuery magic to spice things up. For those of you who are here sim­ple to grab some code and get to work, I’ll post the JavaScript up front and explain step by step after­wards. Here goes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).ready(function(){
	// Get the text from the label element
	var labelTxt = $('#search-form label').text();
	// Put the text from the label element into the search field's value	
	$('#search-input').attr('value',labelTxt);
	// Focus & blur effects
	$('#search-input').focus(function(){
		if ((this.value == '') || (this.value == labelTxt)) {
			$(this).val('');
		}
	});
	$('#search-input').blur(function(){
		if (this.value == '') {
			$(this).val(labelTxt);
		}
	});
	// On submit change the value while server side code is run
	$("#submit").click(function(){
		$('#search-input').attr('value','Searching...');		
	});
});

So we start inside a $(document).ready() with a nested func­tion as an argu­ment so that your code will load after the doc­u­ment does. This allows for the unob­tru­sive tar­get­ing of ele­ments, if you don’t run your code after the document’s load event there won’t be any­thing for JavaScript to work with.

First we need to grab the text from inside the Label ele­ment and store it in a vari­able. I’ve called that vari­able labelTxt. Next we’ll set the search input’s value attribute equal to the con­tents of the labelTxt vari­able using the attr() method.

Now we need to setup two func­tions. One for onfo­cus, an event that is trig­gered when a user selects a form field, and another for onblur, an event that is trig­gered when a user leaves that selected field (or de-selects it).

We use jQuery’s focus() method to nest a func­tion that will set the value to be blank. Next we’ll use the blur() method to put the con­tents of the labelTxt vari­able (that we defined ear­lier) back into the value attribute of the search input.

As an added bonus you can use the sub­mit() method to change the value to “Search­ing…” when the user hit’s the search but­ton. This gives the user some instant feed­back, hope­fully let­ting them know that they’ve sub­mit­ted there infor­ma­tion and it’s time to chill while the server does it’s thing.

Work­ing Example

See a work­ing example