Niquelao - Javascript

Retocando Formularios (episodio I)

5 de September, 2006 por Rumoroso

En numerosas ocasiones nos encontramos con campos de formulario que inicialmente incluyen un texto, bien sea con el objetivo de conseguir un nivel de accesibilidad AAA al pie de la letra (punto de verificación 10.4 de las WCAG 1.0), bien por ofrecer una ayuda al usuario indicándole el tipo de contenido a introducir.

Asimismo, en no menos casos, al recaer el foco sobre el campo en cuestión, el texto que había inicialmente se borra dejándonos escribir lo que deseemos. La cuestión es que si no escribimos nada… ¿por qué no hacer que vuelva el texto inicial?. Tal vez luego quiera volver a ese campo de formulario para escribir algo.

Problema

Queremos restaurar el texto original de los campos del formulario.

Solución

Un script que guarde en una matriz dichos valores y que, al perder el foco el campo de formulario, permita restaurarlos.

El script

El script se detalla a continuación, pudiendo acceder al ejemplo demostrativo o incluso descargarlo.

Para poder utilizarlo, únicamente hay que enlazarlo en la cabecera del documento (<script type="text/javascript" src="ruta/simple.js"></script>). Además, la ausencia de funcionalidad del mismo a causa de que el navegador no lo soporte no implica pérdida alguna ni disminución de la accesibilidad para el usuario.

Lo primero es revisar todos los campos que vamos a controlar mediante este script:

var inputs = document.getElementsByTagName("input");
var textareas =  document.getElementsByTagName("textarea");

Guardamos los valores iniciales:

var valorinicial = new Array();

Asignamos a los campos en los que se puede introducir texto las funciones necesarias para vaciar su contenido o restaurarlo al original según las circunstancias:

function formulario() {
  for (var i = 0; i < inputs.length; i++) {
    if((inputs[i].type == "text") || (inputs[i].type == "password")) {
      valorinicial[inputs[i].id]=inputs[i].value;
       inputs[i].onfocus = function() {vacia(this.id,this.value)}
      inputs[i].onblur = function() {restaura(this.id,this.value)}
    }
  }
  for (var i = 0; i < textareas.length; i++) {
    valorinicial[textareas[i].id]=textareas[i].value;
    textareas[i].onfocus = function() {vacia(this.id,this.value)}
    textareas[i].onblur = function() {restaura(this.id,this.value)}
  }
}

Vaciamos los campos únicamente cuando su contenido sea el mismo que el inicial:

function vacia(id,valor){
  var targetElement = document.getElementById(id);
  var tipo = targetElement.type;
  switch ( tipo ) {
    case "text":
      if (valorinicial[id] == valor)
        targetElement.value = "";
      break
    case "password":
      if (valorinicial[id] == valor)
        targetElement.value = "";
      break
    case "textarea":
      if (valorinicial[id] == valor) {
        targetElement.innerHTML = "";
        targetElement.value = "";
      }
    break
  }
}

Restauramos el contenido de los campos en el caso de no haber introducido nada o únicamente espacios en blanco (y/o retornos de carro en los textarea):

function restaura(id){
  var targetElement = document.getElementById(id);
  var tipo = targetElement.type;
  switch ( tipo ) {
    case "text":
      if (targetElement.value.replace(/ /g, '') == '')
        targetElement.value = valorinicial[id];
      break
    case "password":
      if (targetElement.value.replace(/ /g, '') == '')
        targetElement.value = valorinicial[id];
      break
    case "textarea":
      revisa = targetElement.value.replace(/ /g, '');
      // Eliminamos saltos de línea y tabulaciones
      revisa = revisa.replace(/n/g, '')
      revisa = revisa.replace(/t/g, '')
      revisa = revisa.replace(/r/g, '')
      if (revisa == '') {
        targetElement.innerHTML = valorinicial[id];
        targetElement.value = valorinicial[id];
      }
      break
  }
}

…y finalmente cargamos la función:

window.onload = formulario;

Categoría: Javascript

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback desde tu sitio.

• Artículo anterior: Identificando tipos de enlace
• Artículo siguiente: Problemas de espacio y pseudo-elementos