Clear Input Field Value When Selected
fields
August 28th, 2006 | Web Design | Written by zacheos | 8 Comments
Often when creating forms on a website it is helpful to place descriptive text with some of the form fields to help the user understand what they should type in the box. If this descriptive text is not cleared automatically when the user begins to type, sometimes this will hinder them more than it helps.
Using a simple JavaScript function you can automatically clear the example values from the input box when the user clicks into the field.
For an example of how this works, look at my newsletter fields to the right.
This technique can easily be used to clear the contents of any input box.
All you have to do, is add a small bit of JavaScript to your input like this:
<input value="Your Comment" onclick="this.value=''" type="text">
There are a lot of other ways to do this… Post yours below.
Brrrrilliant!!
thanks, this is exactly what i wanted
Comment by anon — October 25, 2006 @ 9:39 am
Perfect! Thanks mate!
Comment by Jordan Moore — January 11, 2009 @ 6:10 am
Thank you
This little script solved a long boring problem, I’ve had.
The working script can now also be seen at my site.
You sure provided something of value.
Michael’s last blog post… It’s Not Safe
Comment by Michael — February 27, 2009 @ 5:50 am
You’re welcome
Comment by zacheos — February 27, 2009 @ 7:05 am
How do I make the value return to the input field, when clicking somewhere else, if I didn’t enter any text(like this: http://buildinganonline.com/contact)?
Comment by Michael — March 26, 2009 @ 1:45 am
Thnks for this.
Comment by Cluj — June 24, 2009 @ 2:48 am
Thanks for this tip!
Bookmarked this page. 
Comment by Luna — October 7, 2009 @ 10:23 pm
Very useful and quick solution. Perfect for what I was looking for… Clears the value like a charm.
Comment by Devin Walker — April 2, 2010 @ 1:56 pm