textboxes with hints

home | software | javascripts | textboxes with hints

Sometimes the best way to hint what must be entered into a textbox is to put some text in the textbox. 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 written by Drew Noakes -- http://drewnoakes.com // 14 Dec 2006 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 initHintTextboxes() { var inputs = document.getElementsByTagName('input'); for (i=0; i<inputs.length; i++) { var input = inputs[i]; if (input.type!="text") continue; if (input.className.indexOf(HintClass)!=-1) { input.hintText = input.value; input.className = HintClass; input.onfocus = onHintTextboxFocus; input.onblur = onHintTextboxBlur; } } } 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; </p> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-936661-1"); pageTracker._initData(); pageTracker._trackPageview(); </script> </body> </html>