Davin’s blog Occassional posts on Web design, technology, my faith, family, and so on

Revision: Using Javascript to add instructive text for input and textarea form fields

This is a code update to a prior post.

The Javascript I had posted earlier fell short in one important arena: when you submitted the form without entering your own text, the form would send in the instructive text. It should instead have erased that text prior to the form submission.

Further, in retrospect, the code was trying to do too much. It is enough to simply set a class of blurred and then remove it, instead of replacing it with a class of sharpened.

So, with that in mind, here is an updated set of Javascript that can be used to insert instructive or suggested texts into form fields, like text input fields or textareas.

The code

To start with, we need some scripts to add and remove classes values from an element. The one caveat when doing this is to remember that you can have many class names assigned in a single class attribute. So, when adding and removing class names, you have to be sure to leave pre-existing class names alone. Instead of writing these functions, I did a quick Google search for "Javascript addClass" and found these handy Javascript functions, hasClass, addClass, and removeClass, at openjs.com. I'll let you look there for that code.

With those class manipulation functions in hand, I rewrote the setSuggestedFormText function down to this.


/* setSuggestedFormText takes 2 arguments, mode and field.
/ mode is either set to put in place the suggested text
/ clear is to remove the suggested text
/ the set mode also assigns adds a class of blurred
/ field is the value of the ID attribute of the input or textarea element
/ April 13, 2008, Davin Granroth, granroth@gmail.com.
*/
function setSuggestedFormText(mode, field){
var key = document.getElementById(field);
var defaultText = key.title;
if(mode == 'set'){
if(key.value == '') {
addClass(key, 'blurred');
key.value = defaultText;
}
}
if(mode == 'clear'){
if(key.value == defaultText) {
removeClass(key, 'blurred');
key.value = '';
}
}
}

This function takes two arguments: mode and field. The first, mode can be either of set or clear. The one puts in the suggested text from the title attribute of the element, and the other clears it out. Each checks to see if the value of the field has been edited, in which case it respects the user input.

The next step is to set up the function which triggers this function at the appropriate events. There are three events at which the function needs to be called: when the page loads, when focus is put on the field, and when focus is removed from the field. Here is the code for setUpSuggestedFormText.


/*
/ field is the id of input or textarea field
/ parent is the id of the containing form element
*/
function setUpSuggestedFormText(field, parent){
if(document.getElementById(field)){
// This will set the text on page load
setSuggestedFormText('set', field);
// These 2 events will toggle between the set and clear modes
document.getElementById(field).onblur = function(){
setSuggestedFormText('set', field);
}
document.getElementById(field).onfocus = function(){
setSuggestedFormText('clear', field);
}
// Clear the text before sumitting the form.
document.getElementById(parent).onsubmit = function(){
setSuggestedFormText('clear', field);
}
}
}

This setUpSuggestedFormText takes two arguments: the id of the field element and the id of its parent form. The id of the parent is used in the trigger for the form submission. I had considered using a parentNode property to find it, but depending on the markup in the form, it may be multiple parentNodes up. So, this is less code. However, if someone wants to write up the function to recursively walk up the parentNode tree to find the parent form's id, I'd be happy to incorporate it.

The last step is to call the setUpSuggestedFormText once the DOM has loaded in the page. One slightly intrusive means of doing this is to put a Javascript setUp function just before the closing body tag. You can, of course, choose to use something like an addDOMLoadEvent (Google for that) function. Here is what the setUp function looks like in the Javascript.


function setUp(){
setUpSuggestedFormText('to','msgForm');
setUpSuggestedFormText('from','msgForm');
}

You can download sample code which uses an illustration of a message form with from, to, and message fields. The download is a ZIP file which contains an XHTML file, a CSS file, and a Javascript file.

Using Javascript to add instructive text for input and textarea form fields

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;

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