OUTDATED POST: HTML5′s placeholder attribute creates the behavior that this javascript did. Just use the placeholder attribute.

UPDATE 2008-04-13: This code has been refactored. Please view the updated posting.

Over the last year or so, I’ve worked on a number of websites where I wanted to add instructive text to form fields, but didn’t want that text to get in the way when a person actually tries to fill out the form. So, behavior-wise, the page would load with instructive (or suggested) text in the fields. It should have a class attribute that can be used to style it so it doesn’t look like a real value (grey and italic, for instance). When someone clicks on the field, the instructive text should go away and the class should go away so the default styling kicks in. When someone clicks off, the suggested text and class should pop back in, so long as the field is empty. The instructive text should come from the title attribute on the field (that made the most sense to me, given all the options).

So, here are a couple Javascript functions to do so.


function setSuggestedFormText(mode, field) {
/*
mode values must be one of: set, clear, or reset
set is to check the value on page load
clear is to clear the default value when someone clicks on the field
reset is to fill in the default value when someone clicks off the field
field is the value of the ID attribute of the input or textarea element
Use .blurred and .sharpened selectors in your CSS file
*/
var key = document.getElementById(field);
var defaultText = key.title;
switch(mode) {
case 'set':
if(key.value == '') {
key.value = defaultText;
key.setAttribute('class', 'blurred');
}
break;

case ‘clear’:
if(key.value == defaultText) {
key.value = ”;
key.setAttribute(‘class’, ‘sharpened’);
}
break;

case ‘reset’:
if(key.value == ”) {
key.value = defaultText;
key.setAttribute(‘class’, ‘blurred’);
}
break;

default:
break;
}

}
function setUpSuggestedFormText(field){
setSuggestedFormText(‘set’, field);
var node = document.getElementById(field);
node.onblur = function(){
setSuggestedFormText(‘reset’, field);
}
node.onfocus = function(){
setSuggestedFormText(‘clear’, field);
}
}

 

To use these functions, add them to your site’s Javascript library, and then call the following functions when the document is loaded. Google for adddomloadevent or you could probably use jQuery’s document.ready function.

Ok, usage. Let’s say you have an input field for an email address, like so:


<input type="text" name="email"
id="email" title="Your e-mail address" />

 

You would add the following javascript code to trigger the functions.


// Once the DOM is loaded, call this function
setUpSuggestedFormText('email');

 

Feel free to use it. If you make an improvement, please let me know.

To see it in use, try the search form on this page. For now, the Javascript source is at http://davingranroth.com/blog/custom.js