Quick jQuery Tip - Removing default search text

One of the common UI patterns is to add some default text to a search box, so for example, it may say “Enter Search” in the input field. As soon as the user clicks on the field that default text goes away. While there are probably a thousand ways of doing it, here is one quick and dirty way of doing it with jQuery.

First, ensure your search field has an ID and the default text you want.

Ok, sorry, I was being a bit of an ass. Basically the code says: Set the value to blank and stop listening for focus event. Nice, short, and sweet. Hope this helps.

P.S. Of course, you could just use placeholder as well: <input type=”text” name=”search” placeholder=”Search for Beer!”>. This will be ignored by browsers that don’t understand it and will act like the code above for browsers that do. This works in HTML/Adobe AIR applications as well.

P.S.S. I originally used the click even - but Dan mentioned how this wouldn’t work with keyboard navigation. I changed to focus based on his recommendation.

About Raymond Camden

Raymond is a developer advocate looking for his next gig. He focuses on JavaScript, serverless and enterprise cat demos.
If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.