forms

de

Mejoras a formularios Web

Hace un tiempo desarrollé una aplicación Web para llevar registro de unas operaciones.

Uno de sus formularios es de uso muy frecuente (típico data-entry), es por eso que se me ocurrió hacer unas mejoras para facilitar la vida al operador.

  • Autofocus en el primer campo del formulario al cargar la página
  • Reemplazar el tab por el + del teclado numérico para pasar al siguiente campo

Todas estas mejoras resueltas con un poco de JavaScript.

Aclaro que todo esto se usa en el contexto de un framework como RubyOnRails, por lo cual el js se incluye en forma más global y es el por qué de algunos códigos.

Vamos al desarrollo de los puntos.

Autofocus en el primer campo del formulario al cargar la página

<script type="text/javascript">
   function setfocus(){
      if (document.forms.length>0){
         document.forms[0][0].select();
         document.forms[0][0].focus();
      }
   }
</script>
...
<body onload="setfocus();">

La función se ejecuta para todas las páginas al cargarse cada una y de haber formularios en esa página selecciona y hace foco en el primer elemento del primer formulario.

Reemplazar el tab por el +

Generalmente resulta páctico usar el + del teclado numérico en reemplazo del tab para pasar de campo en campo del formulario.

var siguienteCampo = '0'
var nombreForm = "form1"

function TelcaPulsada( e ) {
   if ( window.event != null)
      tecla = window.event.keyCode;
   else if ( e != null )
      tecla = e.which;
   else
      return;

   if (tecla == 107) {
      switch (document.activeElement.id){
         case 'prestacion_prestador_id': siguienteCampo = '1'; break;
         case 'prestacion_fecha': siguienteCampo = '2'; break;
         case 'prestacion_modulo_id': siguienteCampo = '6'; break;
         case 'prestacion_importe': siguienteCampo = '7'; break;
         case 'prestacion_documento': siguienteCampo = '8'; break;
      }

      eval('document.' + nombreForm + '.' + 'elements[siguienteCampo].focus()')
      return false
   }
}

document.onkeydown = TelcaPulsada;

En la variable siguienteCampo voy dando el número del campo al que quiero saltar luego de presionar el +, ya que en este form paso por alto algunos campos que se autocompletan por defecto y son de raro uso.
El código podría ser más prolijo, sobre todo si pudiera manipular los ids de los campos del formulario (llamarlos campo1, campo2, campoN, etc.), cosa que RoR no me deja, ya que los utiliza para las operaciones del framework.