YUI2: Toggle form text field value

A javascript function written in YUI2 to place a default value in a form text field with blur and focus toggle actions.

01 November 2011

For this javascript function we are assuming a simple form, like the example shown below, exists on your page:

<form name="search" action="/" method="post" class="search-form">
	<label for="search-text">Search site for:</label>
	<input type="text" name="search-text" id="search-text" class="form-text-field" title="Please enter a term to search for" />
	<input type="submit" value="Submit" />
</form>

Two functions are written for the text field, one for focus (eg when the user goes to enter something in the field) and one for blur (when the user takes the cursor out of the form field). Both the functions add and remove classes based on whether the text field is active or if the value has changed so that the apperance of the text field can be altered via CSS, the 'blurFormField' function also means the form cannot be submitted with a blank value:

function focusFormField() {
	Dom.addClass(this, config.focusClass);
	if (!Dom.hasClass(this, config.changedClass)) {
		this.value = '';
	}
}
function blurFormField() {
	Dom.removeClass(this, config.focusClass);
	if ((this.value === undefined) || (this.value === '')) {
		Dom.removeClass(this, config.changedClass);
		this.value = Dom.getAttribute(this, 'title');
	} else {
		Dom.addClass(this, config.changedClass);
	}
}

On Dom ready a function runs to get the various forms based on a class name (a CSS id could be used but in my case the form appeared on the page more than once) This function gets the title of the text field and sets the value to be the same, listeners are added to the various form elements for 'focusin', 'focusout' (calling the functions mentioned above) and 'submit':

setFormTextField = function () {
	for (i = 0; i < pageForms.length; i = i + 1) {
		formTextField = Dom.getElementsByClassName(config.textFieldClass, 'input', pageForms[i]);
		formTextField = formTextField[0];
		Dom.setAttribute(formTextField, 'value', Dom.getAttribute(formTextField, 'title'));
		Event.addListener(formTextField, 'focusin', focusFormField);
		Event.addListener(formTextField, 'focusout', blurFormField);
		Event.addListener(pageForms[i].id, 'submit', submitForm);
	}	
};

When the form is submitted a function is called which checks the value of the text field, if it matches the title the form is prevented from submitting and an alert box is displayed:

submitForm = function (e) {
	formTextField = Dom.getElementsByClassName(config.textFieldClass, 'input', this);
	formTextField = formTextField[0];
	if (formTextField.value === Dom.getAttribute(formTextField, 'title')) {
		Event.stopEvent(e);
		alert('Please supply a value');
	}
};

Requires the following YUI2 files:

• Dom
• Event

/*global YAHOO */

YAHOO.namespace('yourNamespaceHere');
YAHOO.yourNamespaceHere = (function () {
	'use strict';
	// Create generic vars, create YAHOO shortcuts, set up function configs
	var init,
		Dom = YAHOO.util.Dom,
		Event = YAHOO.util.Event,
		config = {
			formClass: 'search-form',
			textFieldClass: 'form-text-field',
			focusClass: 'has-focus',
			changedClass: 'is-changed'
		};
		
	// FORM FIELD FOCUS & BLUR FUNCTIONS
	function focusFormField() {
		Dom.addClass(this, config.focusClass);
		if (!Dom.hasClass(this, config.changedClass)) {
			this.value = '';
		}
	}
		
	function blurFormField() {
		Dom.removeClass(this, config.focusClass);
		if ((this.value === undefined) || (this.value === '')) {
			Dom.removeClass(this, config.changedClass);
			this.value = Dom.getAttribute(this, 'title');
		} else {
			Dom.addClass(this, config.changedClass);
		}
	}

	init = function () {

		// SEARCH TEXT FUNCTIONS
		if (Dom.getElementsByClassName(config.formClass, 'form') !== null) {
			(function () {
				var i,
					submitForm,
					formTextField,
					setFormTextField,
					pageForms = Dom.getElementsByClassName(config.formClass, 'form');
				submitForm = function (e) {
					formTextField = Dom.getElementsByClassName(config.textFieldClass, 'input', this);
					formTextField = formTextField[0];
					if (formTextField.value === Dom.getAttribute(formTextField, 'title')) {
						Event.stopEvent(e);
						alert('Please supply a value');
					}
				};
				setFormTextField = function () {
					for (i = 0; i < pageForms.length; i = i + 1) {
						formTextField = Dom.getElementsByClassName(config.textFieldClass, 'input', pageForms[i]);
						formTextField = formTextField[0];
						Dom.setAttribute(formTextField, 'value', Dom.getAttribute(formTextField, 'title'));
						Event.addListener(formTextField, 'focusin', focusFormField);
						Event.addListener(formTextField, 'focusout', blurFormField);
						Event.addListener(pageForms[i].id, 'submit', submitForm);
					}	
				};
				Event.onDOMReady(setFormTextField);
			}());
		}

	};

	return {
		init: init
	};

}());

YAHOO.util.Event.onDOMReady(YAHOO.yourNamespaceHere.init);