Mootools Form Hints

Mootools/Javascript Form Helper
Allows inline help in form input fields

Usage:
ALT TAG should have the following settings

display : text to display in text/textarea
focusColor : Optional, Color when focus on textbox/textarea
blurColor : Optional, Color when focus removed from textbox/textarea

Example

set focus on/off the input field.

HTML

	
	<form>
	<label>Name</label>
	<input name="dname" value=""  class="makehint" alt="
	{display:'Enter your Name',
	focusColor:'#ff8',
	blurColor:'#fff'}" 
	type="text" size="30" />
	</form>

Javascript

	
	
	<script text="text/javascript">
	$$('.makehint').each(function(el){		
	var options = Json.evaluate(el.getProperty('alt')) || {};
	el.value=options.display;
	if (options.blurColor) el.setStyle(
	'background-color',options.blurColor);
	el.addEvent('focus', function(event) {
	if (options.focusColor) {
	el.setStyle('background-color',options.focusColor);
	}
	if (el.value==options.display){
	el.value="";
	}
	})
	el.addEvent('blur', function(event) {
	if (options.focusColor) {
	el.setStyle('background-color',options.blurColor);
	}
	if (el.value==""){
	el.value=options.display;
	}
	});
	});
	</script>