/**
 * Add instructional copy support for text fields and text area.
 * The method will clear the copy, and swap styles.
 *
 * @param textField the text element that will be enhanced.
 * @param copyClass class used for instructional copy
 * @param noCopyClass class used for plain text
 */

function sl_addClearCopyListeners (textField, copyClass, noCopyClass){

	// set default value in the object itself
	textField.originalCopy = textField.value;
	textField.copyClass = copyClass;
	textField.noCopyClass = noCopyClass;
	
	// add listiners
	textField.onfocus = function(){
		if (this.value == this.originalCopy){
			this.value  = '';
			sl_replaceClass(this, this.copyClass, this.noCopyClass);
			return false;
		}
		return true;
	};

	textField.onblur = function(){
		if (this.value == ''){
			sl_replaceClass(this, this.noCopyClass, this.copyClass);
			this.value  = this.originalCopy;
			return false;
		}
		return true;
	};
};

/**
 * Replace a class with another, leaving other classes untouched. 
 * If the class does not exist, nothing will happen.
 *
 * @param domElement the text element that will be enhanced.
 * @param oldClass class to replace
 * @param newClass the replacement class
 */
function sl_replaceClass(domElement, oldClass, newClass){
	var elementClass = '' + domElement.className;
		// save some work, avoid flashing
		if (elementClass.indexOf(oldClass) > -1){
			elementClass = elementClass.replace(oldClass , newClass);
			domElement.className = elementClass;
		}
	}

/**
 * Add instructional copy support for text fields and text area.
 * The method will clear the copy, and swap styles.
 *
 * @param textField the text element that will be enhanced.
 * @param copyClass class used for instructional copy
 * @param noCopyClass class used for plain text
 */

function sl_addClearCopyListeners (textField, copyClass, noCopyClass){

	// set default value in the object itself
	textField.originalCopy = textField.value;
	textField.copyClass = copyClass;
	textField.noCopyClass = noCopyClass;
	
	// add listiners
	textField.onfocus = function(){
  	if (this.value == this.originalCopy){
	  	this.value  = '';
	  	sl_replaceClass(this, this.copyClass, this.noCopyClass);
			return false;
		}
		return true;
	};

	textField.onblur = function(){
  	if (this.value == ''){
	  	sl_replaceClass(this, this.noCopyClass, this.copyClass);
  		this.value  = this.originalCopy;
  		return false;
  	}
		return true;
	};
};

/**
 * Replace a class with another, leaving other classes untouched. 
 * If the class does not exist, nothing will happen.
 *
 * @param domElement the text element that will be enhanced.
 * @param oldClass class to replace
 * @param newClass the replacement class
 */
function sl_replaceClass(domElement, oldClass, newClass){
	var elementClass = '' + domElement.className;
		// save some work, avoid flashing
		if (elementClass.indexOf(oldClass) > -1){
			elementClass = elementClass.replace(oldClass , newClass);
			domElement.className = elementClass;
		}
	}

/**
 * Add instructional copy support for text fields and text area.
 * The method will clear the copy, and swap styles.
 *
 * @param textField the text element that will be enhanced.
 * @param copyClass class used for instructional copy
 * @param noCopyClass class used for plain text
 */

function sl_addClearCopyListeners (textField, copyClass, noCopyClass){

	// set default value in the object itself
	textField.originalCopy = textField.value;
	textField.copyClass = copyClass;
	textField.noCopyClass = noCopyClass;
	
	// add listiners
	textField.onfocus = function(){
  	if (this.value == this.originalCopy){
	  	this.value  = '';
	  	sl_replaceClass(this, this.copyClass, this.noCopyClass);
			return false;
		}
		return true;
	};

	textField.onblur = function(){
  	if (this.value == ''){
	  	sl_replaceClass(this, this.noCopyClass, this.copyClass);
  		this.value  = this.originalCopy;
  		return false;
  	}
		return true;
	};
};

/**
 * Replace a class with another, leaving other classes untouched. 
 * If the class does not exist, nothing will happen.
 *
 * @param domElement the text element that will be enhanced.
 * @param oldClass class to replace
 * @param newClass the replacement class
 */
 function sl_replaceClass(domElement, oldClass, newClass){
	  	var elementClass = '' + domElement.className;
	  	// save some work, avoid flashing
	  	if (elementClass.indexOf(oldClass) > -1){
		  	elementClass = elementClass.replace(oldClass , newClass);
		  	domElement.className = elementClass;
		  }
	}

This utility function attaches listeners to a text field or text area. It supports default text for instructional copy. The original text in the field is used as the instructional/default text. When the box gets focus, it disappears and the user can type. If the focus is lost and the box is empty, the original text will be placed again. 

The method also swaps CSS class if the class names are passes as arguments. There is one class for default text, and one for user text.
This is optional.

Usage:
Create a text field in HTML. For example, use parameters:

input type="text" id="t1" class="textFieldDefault iCopy" value="Type something here"

Then in script block:

sl_addClearCopyListeners(document.getElementById("t1"), 'iCopy' , 'noCopy');

// or without CSS classes:
sl_addClearCopyListeners(document.getElementById("t1"));
'noCopy');

Toggles instructional and default copy text and styles

javascript, text, copy

JavaScript