yensdesign – Tutorials, Web Design and Coding

Currently the search boxes are in the most of websites because the content is growing continually and it’s useful find out something with a simple search. In order to provide them more interaction I want to show you a simple but very useful javascript code snippet to show or hide the default contained text in a search box managing the events focus and blur.

So if we have this html input text box:

[code language="html"]

[/code]

The javascript code that you must put before closing the body element would be:

[code language="html"]



[/code]

The jQuery code would be as follows:

[code language="javascript"]
$(document).ready(function(){
	$("#txtSearch").blur(function(){
		if(!$(this).val()) $(this).val("Search the web...");
	});
	$("#txtSearch").focus(function(){
		if($(this).val() == "Search the web...") $(this).val("");
	});
});
[/code]

And that’s all guys, I hope you can use it for your search boxes and thanks for visiting us! We had a huge quantity unique visitors yesterday and it seems that today will be better