JQuery – Search box with default text

Ever wanted to do a search box with a default text that automatically clears when clicked on ?

Here is the code for it :

$("#src_txt").live("blur", function(){
	var default_value = $(this).attr("rel");
	if ($(this).val() == ""){
		$(this).val(default_value);
	}
}).live("focus", function(){
	var default_value = $(this).attr("rel");
	if ($(this).val() == default_value){
		$(this).val("");
	}
});

To make it work on your code you need to add an id property to the textbox you want it to work on and a rel property with the same value as the default value :


And a demo of the code :



That was all 🙂 Enjoy!

One comment on “JQuery – Search box with default text

  1. Thanks! It’s a great simple feature. Going to use it on my app. I’ll be sure to get you credit.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.