Inside Technique : Automatically Clear Default Form Values
By Scott Isaacs

Many text input fields include descriptive text to help the user understand what they should type. With a very simple one line script, you can automatically clear the value and be ready for the user's input. For example, click on the text boxes below:

Adding this to your form is extremely simple. We created a generic function, clearDefault() that can be used on any text input box:

function clearDefault(el) {
  if (el.defaultValue==el.value) el.value = ""
}

Next, you need to call this script from the onfocus event of your input text box:

E-Mail: 
<INPUT TYPE=text 
  VALUE="E-Mail Address" 
  ONFOCUS="clearDefault(this)">

Search: 
<INPUT TYPE=text 
  VALUE="Search Text" 
  ONFOCUS="clearDefault(this)">

That's it! This works because initial value of the value attribute is assigned to the defaultValue property in JavaScript. When an input element receives the focus, we check if the defaultValue is the same as the current value. If they are equal, the text box is cleared before the user starts typing.

This technique can be further improved with dynamic styles in Internet Explorer by also using a different color for the default value. For example:

In Internet Explorer 4.0 or later the default value in the e-mail field is red and the default value in the search field is italicized. In all browsers (except Navigator 4.0), the text is displayed unchanged. Netscape Navigator recognizes a few CSS attributes on the input element as well as misinterprets others (eg., text-align: center centers the entire line of text). When Netscape recognizes the CSS attribute, it cannot be dynamically changed. This happens in the search field above where the text stays italicized.

For this example, we used an enhance version of the clearDefault function:

<SCRIPT>
function clearDefaultandCSS(el) {
	if (el.defaultValue==el.value) el.value = ""
	// If Dynamic Style is supported, clear the style
	if (el.style) el.style.cssText = ""
}
</SCRIPT>

E-Mail: 
<INPUT 
  STYLE="color: red" 
  TYPE=text 
  VALUE="E-Mail Address" 
  STYLE="color: red" 
  ONFOCUS="clearDefaultandCSS(this)">

Search: 
<INPUT 
  TYPE=text 
  VALUE="Search Text" 
  STYLE="font-style: italic"
  ONFOCUS="clearDefaultandCSS(this)">

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.