Clear Default Values on input boxes

Ever wanted so when you click on the input box like this the default text will disspear?

Or even like this, when you click somewhere else and nothing has been written in it, the default text will come back!

Well, here are the scripts for you. They work for <input> and <textarea>. This one only clears the default text.

<script type="text/javascript">
function clearText(input){
if (input.defaultValue==input.value)
input.value = ''
}
</script>

You also need to have this in your input or textarea.

onfocus="clearText(this)"

This is the script that restores the text:

<script type="text/javascript">
function restoreText(input){
    if (input.value=='')
    input.value = input.defaultValue
  }
</script>

You also need to have this in your input or textarea.

onblur="restoreText(this)"

Example with both functions:

<input type="text" value="Something" name="name" 
onfocus="clearText(this)" onblur="restoreText(this)" />

Comments

Written by Nelson Bonner | Mon, 23 Jun 2008, 06:01: Thanks for the clearvalues.php tutorial. After fighting with other instructions I found elsewhere online, your instructions were notable for being maximally clear and valuable! :o) You can see how I put them to use on http://inrockland.us -- Click on "subscribe". I am bookmarking your site for future reference. Best wishes, -- Nelson Bonner