Fast Tip: Show or hide text in a search box with focus / blur
Thursday, December 18th, 2008Currently 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