Mootools/Javascript Form Helper – Allows inline help for form input fields.

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
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>
	

Demo: http://lab.digimute.com/

Source: http://lab.digimute.com/

Related Listings:

1. Form Field Hints with CSS and Html It’s a basic example of how helpful a little...
2. Moo.Form Examples Script This page gives an overview of Ajax.Form object. It is...
3. ElementFilter – Moo Tools Plugin My new MooTools plugin, ElementFilter, provides a great way for...
4. Awesome Form Script Using simple and semantic HTML, this method uses comprehensive CSS...
5. Form With Style – Ajax Script Forms are not very friendly when it comes to CSS...

Do you like this post?

Email: