Clear input tag hint text on focus

You've all seen them -- a search box containing some hint text like "Enter search here". Then when you click into the box, the text magically disappears so you can type your search. Here's how you do it.

One very simple way of doing this (and probably the most common) is this:

first try

<input
name="q"
onfocus="if(value==defaultValue)value=''"
onblur="if(value=='')value=defaultValue"
value="Enter search here" >

<-- Click in and out of the box!

This method takes advantage of the defaultValue property, which is the original text of the input field when the page was loaded. That way we only have to specify the hint text in one place. But what happens if you want the search field to contain current search if they've already done one so they can modify it. It would be nice to place the hint text back in the box if they go in and clear it out. If this is something you want, then you can't use the defaultValue property, since defaultValue would be the current search, not the hint text. Instead you have to place the hint text directly in the onblur/onfocus attributes like this.

second try

<input name="q"
onfocus="if(value=='Enter search here')value=''"
onblur="if(value=='')value='Enter search here';"
value="Paris Hilton" >

<-- Delete current search, then click out of the box!

Now, let's say you want to make the hint text be a different color or style than when they're typing in the box. We can augment the last trick with some more javascript to swap the styles out.

third try

<input name="q"
class="gray"
onfocus="if(value=='Enter search here'){value='';className='normal'}"
onblur="if(value==''){value='Enter search here';className='gray'}"
value="Enter search here" >

<-- Try typing something and notice the color change

This is pretty good but still has some problems:

• Notice that the class attribute was set to gray. If you wanted to pre-populate with the current search, you'd have to set the class to normal if there was an existing search.
  
• If you want to change the hint text you have to change it in three places.
  
• Every time you change the styles, you have to change them in two places.
  
• If you submit the form, without typing anything, it will happily do a search for "Enter search here". Clear the field and press the search button above to see.
• It does't look very clean and is not terribly maintainable.
  

Wouldn't it be nice if this type of behavior had been part of the HTML spec, so that you could specify the hint text and hint class as attributes? Javscript to the rescue. I've created a javascript library called emptytext that will allow you to do just that. emptytext has a dependency on prototype.js and you use it like this:

fourth try

<script src="prototype.js"</script>
<script src="emptytext.js"</script>
...
<input name="q"
class="normal"
emptyclass="gray"
emptyvalue="Enter search here" >
<script>emptyText()</script>


<-- emptytext in action

Notice that you don't have to pass the id of the <input> tag when you call the emptyText function. Just put the <script> tag right after the <input> tag and it will know what to do.

The emptytext library addresses all the shortcomings of the third try, namely,

• The initial class will be set appropriately based on whether the <input> tag has an empty value or not. There's no need to check for a "current query" when rendering the <input> tag. Just set the class attribute to be the "normal" class, and the emptyclass attribute to the class you want for the hint text.
  
• You only have to change the hint text in one place.
• You only have to change the classes in one place
• If the form is submitted while the hint text is displaying, the hint text will not be sent as the query. Instead, the value of the field will be an empty string. In fact, if you check the field's value attribute from javascript for some client-side validation, it will be empty. That way you don't have to make a special check for the hint text in your validation, nor does the server-side form handler need to make any special check for the hint text. It will never be submitted with the form.
• Looks very clean and is easy to maintain.
  

Below is a link to see the source. To use, just copy the code into a file called emptytext.js and place it on your server (along with prototype.js).

Show/hide emptytext.js source

Enjoy!
//rb