Javascript logo

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:

using the code

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

<script type="text/javascript" src="hint-textbox.js"></script>
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:
<input type="text" name="email" value="enter your email" size="20" class="hintTextbox">


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


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