AutoClear en Formularios HTML

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.

  1. <strong>Registro de Usuarios:</strong><br />
  2. Nombre: <input type="text" id="name" value="Nombre" /><br />
  3. Email: <input type="text" id="name" value="Email" /><br />
  4. Web: <input type="text" id="web" value="Direccion Web" /><br />
  5. <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.

  1. function init(){
  2.     var inp = document.getElementsByTagName('input');
  3.     for(var i = 0; i < inp.length; i++) {
  4.         if(inp&#91;i&#93;.type == 'text') {
  5.             inp&#91;i&#93;.setAttribute('rel', inp&#91;i&#93;.defaultValue);
  6.             inp&#91;i&#93;.onfocus = function() {
  7.                 if(this.value == this.getAttribute('rel')) {
  8.                     this.value = '';
  9.                 } else {
  10.                     return false;
  11.                 }
  12.             }
  13.             inp&#91;i&#93;.onblur = function() {
  14.                 if(this.value == '') {
  15.                     this.value = this.getAttribute('rel');
  16.                 } else {
  17.                     return false;
  18.                 }
  19.             }
  20.             inp&#91;i&#93;.ondblclick = function() {
  21.                 this.value = this.getAttribute('rel')
  22.             }
  23.         }
  24.     }
  25. }
  26. if(document.childNodes) {
  27.     window.onload = init
  28. }
  29. &#91;/js&#93;
  30.  
  31. Este script los colocamos en el header de nuestro HTML y ya tenemos el efecto <em>AutoClear</em> en nuestro formulario, podemos ver el resultado de este ejemplo en <a href="http://samples.unijimpe.net/autoclear/autoclear-javascript.html">autoclear-javascript.html</a> y si desean  pueden ver el código fuente para ver como si incluyo el script.
  32.  
  33. <strong>AutoClear Utilizando Mootools</strong>
  34. Si estamos utilizando <strong>Mootools</strong>, podemos reescribir esta función, utilizando los selectores de elementos y llamando a la función en el evento <em>domready</em> el cual es llamado cuando se ha cargado la página.
  35.  
  36. [js]
  37. window.addEvent('domready', function() {
  38.     inp = $$('input[type=text]');
  39.     inp.each(function(inp) {
  40.         inp.setProperty('rel', inp.value);
  41.         inp.addEvent('focus', function(){
  42.             if (this.value == this.getProperty('rel')){
  43.                 this.value = '';
  44.             }
  45.         });
  46.         inp.addEvent('blur', function(){
  47.             if (this.value == ''){
  48.                 this.value = this.getProperty('rel');
  49.             }
  50.         });
  51.         inp.addEvent('dblclick', function(){
  52.             this.value = this.getAttribute('rel');
  53.         });
  54.     });
  55. });

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

Comentarios Total 8 comentarios


Ignacio
Publicado: 19/08/2008 12:23 pm

Te recomiendo el plugin ‘watermark’ para jQuery, incluso trabaja con campos de tipo password.
Saludos

DavilaCS
Publicado: 19/08/2008 1:25 pm

Seria interesante esta funcion en action Script.

jose
Publicado: 22/08/2008 3:01 pm

otra alternativa seria asi:(para el nombre por ejemplo)

Claro que tendria que ponerse en cada casilla de texto.
Saludos.

AutoClear en Formularios HTML — Tablosign
Publicado: 24/08/2008 5:13 pm

[…] Es uno de los métodos mas prácticos en donde se le indica a los usuarios que tipo de información debe ingresar en los formularios mediante un valor inicial. 0 # […]

Autoclear en formularios HTML - colorate
Publicado: 27/08/2008 8:18 am

[…] Ejemplo: Form Autocompletar Enlace: Tutorial […]

David Castillo
Publicado: 27/08/2008 10:07 am

hola, muchas gracias por este tip, si que me sirvio y una preguntica, podrias hacer un tutorial para un formulario de contacto?!

matias
Publicado: 24/03/2009 3:59 pm

Quisiera felicitarte por los estupendos tutoriales de php que subis. Me han servido muchisimo en mis proyectos.
Agradecimientos y saludos!
matias


[…] demás tediosa si tenemos muchos campos y hay que hacerlo cononfocusyonblur.Esta es una pequeña solución que encontré en unijimpe y modifiqué para que trabaje con inputs de tipo text y password:Preparando el FormularioPara […]

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)