input textboxes with watermark hints

home | software | javascript | input textboxes with watermark hints

Sometimes the best way to hint what must be entered into a textbox is to put some text in the textbox. This is also referred to as a textbox watermark.

Using this javascript makes the process straightforward. Its key features are:

Provides a hint string within the textbox
Causes the hint to disappear when the textbox receives the focus
Will revert the hint text when the textbox is blurred (loses focus) if no text was entered
Uses different CSS classes to allow the hint text to be lighter in shade than the user's input

using the code

Add this to the <head> section of your HTML document:

Add these classes to your CSS declaration:

INPUT.hintTextbox { color: #888; } INPUT.hintTextboxActive { color: #000; }

Specify the class attribute on your input element to be hintTextbox. For example:

example

Here are a collection of textboxes. Experiment with clicking in, tabbing between and setting then deleting values.

limitations

This script may not behave as expected when forms are pre-populated with values that are not hints, perhaps by a server-side script. In such cases, the server's value would be treated as a hint (i.e. appearing grey and disappearing when focussed). Do not set the class name to hintTextbox for such fields.

the code

hint-textbox.js - right-click and choose save as

// Script by Drew Noakes
// http://drewnoakes.com
// 14 Dec 2006 - Initial release
// 08 Jun 2010 - Added support for password textboxes

var HintClass = "hintTextbox";
var HintActiveClass = "hintTextboxActive";

// define a custom method on the string class to trim leading and training spaces
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); };

function onHintTextboxFocus() {
  var input = this;
  if (input.value.trim()==input.hintText) {
    input.value = "";
    input.className = HintActiveClass;
  }
}

function onHintTextboxBlur() {
  var input = this;
  if (input.value.trim().length==0) {
    input.value = input.hintText;
    input.className = HintClass;
  }
}

window.onload = initHintTextboxes;