Forms: How to clear default text of input box upon selection - JavaScript

Have you seen how sometimes text boxes will have some default text in them that when you click on them goes away. Would you like that for your site, but don't know how? This brief tutorial will give you the details you need to get it done. It is a fairly simple piece of JavaScript to do it.

For an example of what we are trying to do:

First, I'll show you the code, then if you are interested, you can read on to get an explanation of what it all means.

Put this in the head section of your page (it can go in the page itself, but the head is a better place:

<script type="text/javascript">
 function clearMe(formfield){
  if (formfield.defaultValue==formfield.value)
   formfield.value = ""
 }
</script>

And this is the input box that goes into you form:

<input type="text" name="searchbox" value="Keyword Search" onfocus="clearMe(this)" />

With our input box, we need a name to reference it by. In this case, it is called searchbox. The value tells us what the default value will be. Finally, onfocus tells us that when this box is made active, by clicking on it or tabbing to it, or some other means, then the function clearMe is called and sent the value of this. this is a special JavaScript property that sends a reference to the html property it is laid in. In other words, it means "This HTML piece".

The script is really simple, just an if statement. You could just include it directly in the onfocus, but that does not lend to reusability, so it is best to stick a function in the head. We will dissect it line by line.

<script type="text/javascript"> - Tells the browser that the following script is in JavaScript. It ends with </script>. So everything between the two must be in JavaScript.

function clearMe(formfield){ - This starts the function. The name of the function is give and then in parenthesis are any variables that are passed to the function. In this case the function is named "clearMe" and it is passed one variable called "formfield".

if (formfield.defaultValue==formfield.value) - Is a simple if statement. This simple says that if the form field (passed from the input box) has the same default value and current value then we proceed. If not, we skip the next line of code. Since there is no { after the statement, only one line will be used. If you wanted to have multiple lines used for the if, then you would enclose them in { and }, just like the function.

formfield.value = "" - If the if statement above was true then this line changes the current value of the form field to be blank.

} - ends the function. The function is surrounded in { and } so the browser knows where it begins and ends.

</script> - As I mentioned above, this tells the browser that we no longer are using a scripting language and to go back to HTML.

Next, I'll take this one step further and show you how to return the default value if they leave the form field blank.