Campo input con explicacion dinámica con Javascript y Mootools

En este Taller de Mootools vamos a crear una clase para implementar un funcionamiento que puede resultar atractivo de cara a la usabilidad de los formularios. Se trata de un campo de texto que, cuando aparece vacío, muestra un mensaje configurable, que serviría para indicar qué tipo de información tiene que cumplimentar el usuario, o cualquier otro mensaje que decida el programador de la página.

El script en realidad no tiene ninguna complicación especial, si es que hemos seguido el Manual de Mootools de DesarrolloWeb.com, donde podremos aprender cosas que utilizaremos a continuación, como la creación de clases de programación orientada a objetos, los eventos en Mootools, la clase Options, etc.

Para que se sepa bien cuál es el objetivo de este artículo lo mejor es ver el ejemplo en marcha. Veréis dos campos INPUT de texto con un mensaje escrito. Si nos ponemos encima del campo para escribir algo, se borra automáticamente el texto, para dejarnos escribir lo que necesitemos. Si no se escribe nada, al sacar el foco del campo, el mensaje vuelve a aparecer. Si escribimos algo en el campo veremos que el mensaje ya no aparece de nuevo.

Utilización de la clase para el campo de texto autoexplicativo

Voy a insistir en el modo de uso de la clase y sus posibilidades de configuración, para las personas que deseen utilizarla en sus páginas. Esto se hace a través de la instanciación de la clase, en la que tenemos que pasar el identificador del campo de texto que queremos configurar como autoexplicativo y además, de manera opcional, un objeto de opciones.

Por ejemplo, así se instanciaría la clase sin enviar el objeto de opciones, que no es requerido:

var campoExp1 = new CampoAutoexplicativo("campo1");

Lógicamente, necesitaremos que haya en algún lugar de la página un campo INPUT con el identificador "campo1".

<input type="text" name="campo1" id="campo1" size="30">

Opciones de configuración:
Además, como decía, se permite indicar opcionalmente un objeto con varios valores opcionales, que si no se indican toman determinados valores por defecto, configurados en la clase.

• texto: una cadena de caracteres que tenga el texto que se desea configurar en el campo, que aparecerá cuando éste esté vacío. Por defecto el texto tiene este valor: 'Por favor, rellena este campo'.
• colorExplicacion: este valor sirve para indicar el color del texto que aparece como explicación. Su valor por defecto es '#99f'
• colorNormal: este valor indica el color del texto que escriba el usuario, por defecto '#000'.

Así pues, podríamos instanciar un campo autoexplicativo indicando todos estos valores opcionales, por ejemplo de la siguiente manera:

var campoExp2 = new CampoAutoexplicativo("campo2", {'texto': 'Tu edad', 'colorExplicacion': '#c00', colorNormal: '#0c0'});

Código de la clase CampoAutoexplicativo en Javascript-Mootools

Ahora coloco el código Javascript completo de esta clase:

var CampoAutoexplicativo = new Class({
   //implemento options para utilizar la clase Options que permite...
   //parametrizar las clases con valores opcionales
   Implements: Options,
   
   //objeto con los valores por defecto que tomarán los options
   options: {
      texto: 'Por favor, rellena este campo',
      colorExplicacion: '#99f',
      colorNormal: '#000'
   },
   
   //constructor, que recibe el id de un campo y un objeto con los valores opcionales
   initialize: function(campo, opciones){
      //cargo el elemento en la propiedad campo
      this.campo = $(campo);
      //doy de alta las opciones y las junto con los valores por defecto cuando no se indicaron
      this.setOptions(opciones);
      //llamo a un método para mostrar la explicacion
      this.explicate();
      
      //creo un evento cuando se quita el foco de la aplicación de este campo
      this.campo.addEvent("blur", function(){
         this.explicate();
      }.bind(this));
      
      //creo un eventoi sobre el campo para cuando el usuario se situa en él
      this.campo.addEvent("focus", function(){
         //compruebo si en el campo había escrito la explicación
         if (this.campo.value==this.options.texto){
            //borro la explicación
            this.campo.value="";
            //coloco el color del texto para cuando no está la explicacion
            this.campo.setStyle("color", this.options.colorNormal);
         }
      }.bind(this));
      
   },
   
   //método para mostrar la explicación
   explicate: function(){
      //compruebo si en el campo no hay escrito nada, para no borrar el dato que pueda haber
      if (this.campo.value==""){
         //cargo la explicación en el value del campo
         this.campo.value = this.options.texto;
         //coloco el color del texto para la explicacion
         this.campo.setStyle("color", this.options.colorExplicacion);
      }
   }
});

La clase está comentada para que se pueda entender mejor. Lo cierto es que no tiene mucha dificultad, si se tiene algo de experiencia con el framework Javascript Mootools. En caso contrario, por favor, leer el Manual de Mootools que hemos publicado en DesarrolloWeb.com, que está accesible para cualquier persona que tenga algo de experiencia con Javascript. Si se desea, se puede ver de nuevo el ejemplo en marcha en una página aparte.