Clear on Focus, Watermark, or Hint Text Input Field


What is it?

Called clear on focus, watermark text, or hint text, this function in essence combines labels with field values. Hint text appears directly inside an input element. Clicking on the text clears it out, allowing the user to enter their data.

When to use it?

Most commonly this technique saves space, allowing you to identify a control using the same space that is available for input.

This technique can also be used along with labels to provide hints, additional instructions, or examples.

When not to use it?

The key quality of this function is that user input replaces the field label or description, consequently once a user enters data they will no longer be able to see the hint or watermark. Therefore this is not suitable for forms that pre-populate any information, or forms more than 1 or 2 fields long where labels are not also used.

The Code

This can be done in line using just two text field events, onfocus and onblur. Combined with a tiny bit of javascript we perform a check both when the user initially clicks on the field, and when the user leaves the field.

<label for="phone">Phone Number</label>
onfocus="if (this.value=='xxx-xxx-xxxx') { this.value=''; }"
onblur="if (this.value == '') { this.value = 'xxx-xxx-xxxx'; }" />

HTML5 Alternative

HTML5 includes a new placeholder tag that performs this same function, but don’t expect it to work in Internet Explorer. Consequently this works well for the hint type application, but should not be used as a substitute for labels without a fallback.

<input placeholder="text" />

Notice that this works a little different, the text doesn’t actually vanish until you start typing.

jQuery Alternative

If you’re using a lot of watermarks, or developing a template, you might want to incorporate a jQuery plugin that allows for a more standardized, modular and feature laden approach. A plugin called jQuery Watermark does the job nicely.

This entry was posted in Snippets and Demos.