/**
* 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;
}
}
Tag Archive for area
Toggles instructional and default copy text and styles
Category: Uncategorized |
Tags: area, copy, field, input, instructional, javascript, text, textarea, TextField