rutina para saltar campos con enter

buyito · #1 (**permalink**) 01/02/2005, 12:58

Hola a todos, estoy tratando de hacer una rutina que me sirva para que todas mis paginas que contengan campos de un formulario (text, select, checkbox, radio) al agregarle una llamada (sin parametros) en el evento onkeypress, onkeydown onkeyup (cualquiera) pueda tabular de un campo a otro cuando se presiona el enter.
Estuve tratando de hacerlo con window.document.forms[0].elements pero me todavia me falta saber que campo es el que instancia el evento.

Espero que me puedan ayudar.

Gracias

JavierB · #2 (**permalink**) 01/02/2005, 13:09

Hola buyito

¿Te serviría algo así...?

Código PHP:

  <html> 
<head> 
<script> 
function tabular(e,obj) { 
  tecla=(document.all) ? e.keyCode : e.which; 
  if(tecla!=13) return; 
  frm=obj.form; 
  for(i=0;i<frm.elements.length;i++)  
    if(frm.elements[i]==obj) {  
      if (i==frm.elements.length-1) i=-1; 
      break } 
  frm.elements[i+1].focus(); 
  return false; 
} 
</script> 
</head> 
<body> 
<form> 
<input type="text" onkeypress="return tabular(event,this)" /> 
<input type="text" onkeypress="return tabular(event,this)" /> 
</form> 
</body> 
</html>

Saludos,

buyito · #3 (**permalink**) 01/02/2005, 13:30

Hola JavierB, Muchisimas gracias, anduvo a la perfeccion.

Me salvaste!!!!

Saludos.

JavierB · #4 (**permalink**) 01/02/2005, 13:50

Cita:

Iniciado por buyito

Me salvaste!!!!

Suele pasarnos a los españoles, debe ser por la influencia de Don Quijote

Me alegro de que te haya servido

kalaxtro · #5 (**permalink**) 29/12/2007, 08:58

Le hice un cambio a tun función javascript ya que falla cuando existen campos desabilitados, aunque aún le falta los campos readonly.

Código PHP:

  function tabular(e,obj) 
        {
            tecla=(document.all) ? e.keyCode : e.which;
            if(tecla!=13) return;
            frm=obj.form;
            for(i=0;i<frm.elements.length;i++) 
                if(frm.elements[i]==obj) 
                { 
                    if (i==frm.elements.length-1) 
                        i=-1;
                    break 
                }
            /*ACA ESTA EL CAMBIO*/
            if (frm.elements[i+1].disabled ==true )    
                tabular(e,frm.elements[i+1]);
            else frm.elements[i+1].focus();
            return false;
        }

Trilan · #6 (**permalink**) 07/05/2009, 12:56

Le agrego la modificacion con el readOnly.

Código PHP:

  function tabular(e,obj)  
        { 
            tecla=(document.all) ? e.keyCode : e.which; 
            if(tecla!=13) return; 
            frm=obj.form; 
            for(i=0;i<frm.elements.length;i++)  
                if(frm.elements[i]==obj)  
                {  
                    if (i==frm.elements.length-1)  
                        i=-1; 
                    break  
                } 
    /*ACA ESTA EL CAMBIO disabled*/ 
            if (frm.elements[i+1].disabled ==true )     
                tabular(e,frm.elements[i+1]); 
    /*ACA ESTA EL CAMBIO readOnly */ 
            else if (frm.elements[i+1].readOnly ==true )     
                tabular(e,frm.elements[i+1]); 
            else frm.elements[i+1].focus(); 
            return false; 
}

Saludos
Yours Trilan

edus1984 · #7 (**permalink**) 09/10/2009, 07:23

Hola gente linda!!!!!!!!!! Muchas gracias por sus colaboraciones.
Probé la rutina en firefox y en IE 6 y funciona muy bien!!
Saludos mis amigos

edus1984 · #8 (**permalink**) 09/10/2009, 09:53

Agregado para los campos hidden (los saltea):

Código PHP:

  function tabular(e,obj) {
  tecla=(document.all) ? e.keyCode : e.which;
            if(tecla!=13) return;
            frm=obj.form;
            for(i=0;i<frm.elements.length;i++) 
                if(frm.elements[i]==obj) 
                { 
                    if (i==frm.elements.length-1) 
                        i=-1;
                    break 
                }
    /*ACA ESTA EL CAMBIO disabled, Y PARA SALTEAR CAMPOS HIDDEN*/
            if ((frm.elements[i+1].disabled ==true) || (frm.elements[i+1].type=='hidden') )    
                tabular(e,frm.elements[i+1]);
    /*ACA ESTA EL CAMBIO readOnly */
            else if (frm.elements[i+1].readOnly ==true )    
                tabular(e,frm.elements[i+1]);
            else frm.elements[i+1].focus();
            return false; 
}

OAGF · #9 (**permalink**) 09/10/2009, 12:08

no me funcionó a la primera porque tenia algunos campos hide pero al asignarles readonly funcionaron a la perfección.

la pregunta es cómo agregarle lineas para que si encuentra un campo hide lo salte también

Saludos!

OAGF · #10 (**permalink**) 09/10/2009, 14:47

Perfecto!.... ahora si funciona perfecto

y si el formulario estuviera lleno y se deseara el efecto completo del Tab solo hay que agregar la siguiente linea y queda

Código PHP:

  /*ACA ESTA EL CAMBIO readOnly */
            else if (frm.elements[i+1].readOnly ==true )    
                tabular(e,frm.elements[i+1]);
            else {
                frm.elements[i+1].select();   /* AÑADIR LOS CORCHETES Y ESTA INSTRUCCION */
                frm.elements[i+1].focus();
            }
            return false; 
}

Gracias!!!!

chenteb · #11 (**permalink**) 29/10/2010, 07:59

Algo como esto me estaba buscando y funciono super bien, gracias por compartirlo

pmfras · #12 (**permalink**) 25/01/2011, 15:53

hola foro, estoy trabajando en un sistema con todas estas tecnologias, soy muy nuevo en esto y esta funcion que esta en el foro mas todas las mejoras realizadas me vinieron muy bien y gracias a todos por esto. Lo unico: cuando tengo un SELECT no me anda bien, no saltea. Uds lo probaron en un caso asi??

gatr · #13 (**permalink**) 02/03/2011, 16:34

Se agrega una validación para determinar si el campo es text para que no falle al invocar el método select(), para que no falle en los campos que no tienen este método, como los SELECT

Código PHP:

  function tabular(e,obj)  
{ 
  tecla=(document.all) ? e.keyCode : e.which; 
            if(tecla!=13) return; 
            frm=obj.form; 
            for(i=0;i<frm.elements.length;i++)  
                if(frm.elements[i]==obj)  
                {  
                    if (i==frm.elements.length-1)  
                        i=-1; 
                    break  
                } 
    /*ACA ESTA EL CAMBIO disabled, Y PARA SALTEAR CAMPOS HIDDEN*/ 
            if ((frm.elements[i+1].disabled ==true) || (frm.elements[i+1].type=='hidden') )     
                tabular(e,frm.elements[i+1]); 
/*ACA ESTA EL CAMBIO readOnly */ 
            else if (frm.elements[i+1].readOnly ==true )     
                tabular(e,frm.elements[i+1]); 
            else { 
                if (frm.elements[i+1].type=='text') /*VALIDA SI EL CAMPO ES TEXTO*/ 
                { frm.elements[i+1].select(); };   /* AÑADIR LOS CORCHETES Y ESTA INSTRUCCION */ 
                frm.elements[i+1].focus(); 
            } 
            return false;  
}

alcides_jr_1 · #14 (**permalink**) 13/04/2011, 10:00

Buenas he utilizado el codigo y me a funcionado de maravilla pero el problema es que yo oculto una tabla muy grande con el atributo style=("display:none") y cuando intento pasar se queda trabado en el text anterior al div oculto

locurafragil · #15 (**permalink**) 20/05/2013, 13:49

Aunque haya pasado el tiempo, siempre se puede ir mejorando.

Quería aportar que para los textarea, funciona perfecto el tabulado con ENTER, pero también te tabula con SHIFT+ENTER. Para que esto no suceda, solamente agregar la siguiente línea.... ya podrán bajar de línea dentro de un textarea y tabular con ENTER

Código:

//tecla=(document.all) ? e.keyCode : e.which;
            if(e.keyCode!=13) return;
            if(e.shiftKey == true) return;
			frm=obj.form;

Saludos!!!