Tabulación entre fieldsets

matiasariel · #1 (**permalink**) 02/04/2009, 07:20

Hola, estoy diseñando un formulario para un sistema de control de stock, que esta dividido en distintas secciones utilizando fieldsets. Como necesito tabular con "Enter" y no con "Tab" incluí el siguiente código javascript que incluyo en cada elemento del formulario (son 38 en total):

<script>
function tabular(e,obj) {
tecla=(document.all) ? e.keyCode : e.which;
if(tecla!=13) return;
frm=obj.form;
for(i=0;i<38;i++)
if(frm.elements[i]==obj) {
if (i==frm.elements.length-1) i=-1;
break }
frm.elements[i+1].focus();
return false;
}
</script>

El código funciona correctamente dentro de cada fieldset individual. Es decir pasa de un campo a otro presionando la tecla "Enter". Pero al terminar el fieldset en el que estoy ubicado, no "salta" al primer campo del fieldset siguiente.

Se que una forma de solucionarlo es si simulo un "fieldset" utilizando etiquetas div y css, pero antes quisiera saber si saben a que se debe este comportamiento y si puedo evitar hacer lo anterior. He buscado mucho pero no encontré solución.

Como aclaración, y si sirve de algo, el sistema es para un hospital (uso interno), y me interesa en principio que funcione con Firefox, que es el navegador que se utiliza.

Muchas gracias
Matías

matiasariel · #2 (**permalink**) 02/04/2009, 11:58

Ya solucioné el problema, gracias y perdón por las molestias.

ElJavista · #3 (**permalink**) 02/04/2009, 12:17

Podrías colocar la forma como lo solucionaste para que otros que tengan el mismo problema aprendan un poco?

matiasariel · #4 (**permalink**) 02/04/2009, 15:10

Hola, aver, el tema es el siguiente, para resumir: mi problema era que tenia un formulario dividido en fieldsets y que queria tabular con la tecla enter. Para eso utilicé una función javascript (que encontré por ahí en la web y que figura en mi primer post), y que funcionaba (pasaba de campo en campo con enter), pero solo hasta llegar al final de un fieldset, luego no saltaba al primer campo del fieldset siguiente.

Sinceramente recién estoy empezando con programación web, y no tengo mucha
idea de javascript. Pero pude hacer lo siguiente para solucionarlo:

Pongo un ejemplo de una página simple con un formulario con dos fieldset primero sin ninguna funcion:

Código:

<HTML>
<HEAD>
   <title>Tabular con enter entre fieldsets</title>
</HEAD>
<BODY>

<form action="" id="formulario" method="GET">

<fieldset id="formulario"><legend>Formulario</legend>
  <span><label for="nroform">Nro. Formulario <br  /><input  type="text" id="nroform" /></label></span><br />
  <span><label for="efector">Efector <br  /><input  type="text" id="efector"  /></label></span>
</fieldset>
 
<fieldset id="fechacarga"><legend>Fecha (dd-mm-aaaa)</legend>
          <span><input type="text" id="dia_car" size="2" /></span>
          <span><input type="text" id="mes_car" size="2" /></span>
          <span><input type="text" id="anio_car" size="2" /></span>
        </fieldset> 
 </fieldset>
</form>

</BODY>
</HTML>

Ahora la misma página con la función javascript que permite tabular con enter entre fieldsets (marco en rojo lo que agregué):

Código:

<HTML>
<HEAD>
   <title>Tabular con enter entre fieldsets</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--  
  var elementos = new Array ("nroform","efector","dia_car","mes_car","anio_car");
 
  function tabular (evento,objeto, indice, elementos)
  {tecla=(document.all) ? evento.keyCode : evento.which;
   if(tecla!=13) return;
   document.getElementById(elementos[indice]).focus();
   }
  
//-->
</script>

<BODY>

<form action="" id="formulario" method="GET">

<fieldset id="formulario"><legend>Formulario</legend>
  <span><label for="nroform">Nro. Formulario <br  /><input  type="text" id="nroform" onkeypress="return tabular(event,this,1,elementos)"/></label></span><br />
  <span><label for="efector">Efector <br  /><input  type="text" id="efector"  onkeypress="return tabular(event,this,2,elementos)"/></label></span>
</fieldset>
 
<fieldset id="fechacarga"><legend>Fecha (dd-mm-aaaa)</legend>
          <span><input type="text" id="dia_car" size="2" onkeypress="return tabular(event,this,3,elementos)"/></span>
          <span><input type="text" id="mes_car" size="2" onkeypress="return tabular(event,this,4,elementos)"/></span>
          <span><input type="text" id="anio_car" size="2" onkeypress="return tabular(event,this,5,elementos)"/></span>
        </fieldset> 
 </fieldset>
</form>

</BODY>
</HTML>

Para finalizar explico lo que hice:

Cree un array que contiene los ids de los elementos del formulario, en el orden en el que quería que vaya cambiando el foco al apretar enter.
Luego cree una función en javascript que recibe como parametros un indice (que determina la posición del "id" del elemento del arreglo, que va a tomar el siguiente foco (la función también recibe el arreglo creado anteriormente).
La función primero determina si la tecla presionada es enter, y luego, si lo es, enfoca al elemento cuyo id esta en la posición del arreglo que entra en la variable "indice". Eso se hace en la línea

Código:

document.getElementById(elementos[indice]).focus();

Y para finalizar a cada elemento del formulario le agregue el evento onkeypress llamando a la funcion. Y mandando como variable "indice" una constante que determina el valor del siguiente elemento a ser enfocado.

Seguramente hay alguna forma mas eficiente de hacerlo, y agradecería cualquier corrección. También aclaro que solo lo probé en Firefox.

Saludos
Matías