unijimpe

Uno de los métodos mas prácticos para indicar a los usuarios que tipo de información debe ingresar en los formularios es incluir un valor inicial. El siguiente ejemplo ayudará a mostrar valores por defecto los cuales se limpiarán al acceder al campo y volverán a mostrar el valor iniciar si no se ha ingresado información.

Preparando el Formulario
Lo primero es crear nuestro formulario, lo hacemos de la manera normal donde incluimos los valores iniciales que utilizaremos para indicar al usuario que valores ingresar.

<strong>Registro de Usuarios:</strong><br />
Nombre: <input type="text" id="name" value="Nombre" /><br />
Email: <input type="text" id="name" value="Email" /><br />
Web: <input type="text" id="web" value="Direccion Web" /><br />
<input name="btsend" type="button" value="Enviar" />

AutoClear Utilizando Javascript
La primero forma es utilizar solamente Javascript, para ello nos hemos basado en el script propuesto en Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus, este script se ejecuta al cargarse la página y recorre todos los elementos input text y guarda el valor inicial del formulario en la propiedad rel, luego agrega los eventos a ejecutarse en onfocus, onblur y ondblclick, en donde se verifica si se ha ingresado algún valor para mostrar la ayuda.

function init(){
	var inp = document.getElementsByTagName('input');
	for(var i = 0; i < inp.length; i++) {
		if(inp[i].type == 'text') {
			inp[i].setAttribute('rel', inp[i].defaultValue);
			inp[i].onfocus = function() {
				if(this.value == this.getAttribute('rel')) {
					this.value = '';
				} else {
					return false;
				}
			}
			inp[i].onblur = function() {
				if(this.value == '') {
					this.value = this.getAttribute('rel');
				} else {
					return false;
				}
			}
			inp[i].ondblclick = function() {
				this.value = this.getAttribute('rel')
			}
		}
	}
}
if(document.childNodes) {
	window.onload = init
}
[/js]

Este script los colocamos en el header de nuestro HTML y ya tenemos el efecto AutoClear en nuestro formulario, podemos ver el resultado de este ejemplo en autoclear-javascript.html y si desean  pueden ver el código fuente para ver como si incluyo el script.

AutoClear Utilizando Mootools
Si estamos utilizando Mootools, podemos reescribir esta función, utilizando los selectores de elementos y llamando a la función en el evento domready el cual es llamado cuando se ha cargado la página.

[js]
window.addEvent('domready', function() {
	inp = $$('input[type=text]');
	inp.each(function(inp) {
		inp.setProperty('rel', inp.value);
		inp.addEvent('focus', function(){
			if (this.value == this.getProperty('rel')){
				this.value = '';
			}
		});
		inp.addEvent('blur', function(){
			if (this.value == ''){
				this.value = this.getProperty('rel');
			}
		});
		inp.addEvent('dblclick', function(){
			this.value = this.getAttribute('rel');
		});
	});
});

Nótese que hemos utilizado la función each de Mootools que nos permite recorrer todos los elemento del array que contienen los campos de texto, lo siguiente es agregar los eventos para detectar el focuso blur. Pueden ver el resultado de esta versión en autoclear-mootools.html

Posts Relacionados

• Niceforms: Formularios CSS
• Vanadium: Validar formularios fácilmente
• Utilizar reCAPTCHA con PHP
• Prevenir ataques XSS con PHP
• BlueTripCSS Framework