We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
Fast Tip: Show or hide text in a search box with focus / blur
December 18th, 2008
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 
blur, fast, fasttips, focus, hide, search box, show, tip
Coding, Fast Tips
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.
Fast Tip: Show or hide text in a search box with focus / blur…
[...]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.[...]…
Wonderful write-up. I don’t quite go along with every little thing you’ve went over, but you absolutely have some excellent points in there.