Este es un ejemplo de Javascipt/DHTML que muestra cómo puede implementarse un salto automático entre cajas de texto al llegar al número máximo de caracteres admitidos. Se ha pensado para ser compatible tanto para Internet Explorer como para Mozilla.

Puede leer el código fuente de abajo para copiarlo y para leer las explicaciones.

Puede ver el comportamiento resultante en las cajas de texto celestes siguientes:

    
    


La primer caja de texto solo habrá de aceptar 4 caracteres NUMÉRICOS; mientras que la segunda aceptará 9 caracteres alfanuméricos.



<html>
 <head>
  <title>
   Javascript/DHTML: Cambio de Foco por Límite de Campos
  </title>
 </head>


 <body leftmargin="0" topmargin="0" bgcolor="#aaaaaa" text="0">

  <script>
   var TIPO_NUMERO = 0;
   var TIPO_TEXTO  = 1;

  ///Esta función debe ser referenciada
  ///por la caja de texto que deseamos controlar,
  ///mediante el evento 'onkeypress':
  ///
  ///Ejemplo:
  ///         onkeypress="return verificar('texto1', 'texto2', 10, event)"
  ///
  ///Nótese que siempre debe usarse return para controlar el evento onkeypress:
  ///si regresa true se escribirá la tecla presionada; de lo contrario se ignora
  ///y se pasa a la siguiente caja (opcionalmente).
  ///
  ///El parámetro 'siguienteCajaTexto' es opcional y si se deja con un valor de '',
  ///no tiene ningún efecto (no enfoca otra caja al llegar al número máximo de
  ///caracteres).
  ///
  ///El parámetro _event siempre debe rellenarse con el nombre de variable
  ///*event* (sin comillas). De esta forma capturamos los eventos del teclado.
  ///
  ///El parámetro *tipoDatos* sirve para evitar que se ingresen valores no numéricos.
  ///Si a este le damos el valor TIPO_NUMERO, la caja de texto referenciada por la
  ///función en ese caso no admitirá la escritura de números (esto puede sobrepasarse,
  ///sin embargo, pegando el valor indirectamente).
  ///
  ///NOTA: Cada cuadro de texto debe ser reforzado con maxlength para
  ///      evitar que se sobrepase este mecanismo al pegar texto de
  ///      forma indirecta, algo como:
  ///                                   <input maxlength="4" />
  ///
   function verificar(nombreCajaTexto,
                      siguienteCajaTexto,
                      tipoDatos,
                      longitudMaxima,
                      _event)
   {
    ///Esto es para capturar la
    ///tecla presionada:
    ///
      var character=null;
      //Específico para IE:
      //
       try{ character=window.event.keyCode; }catch(e){}
      //Para Mozilla y otros:
      //
       if(character==null)try{ character=_event.charCode; }catch(e){}




     //Con esto evitamos el ingreso de caracteres no válidos
     //en un campo solo numérico:
     //
      if(character!=0 && tipoDatos==TIPO_NUMERO && isNaN(String.fromCharCode(character)))
      {
       alert("Ha ingresado un valor ilegal en un campo de solo valores.");
        return false;
      }



    ///Aquí evitamos que se escriba directamente más de
    ///los caracteres que deseamos que se escriban para
    ///la caja de texto especificada:
    ///
     if(character!=0 && (document.getElementById(nombreCajaTexto).value+String.fromCharCode(character)).length>longitudMaxima)
     {
      alert("Solo se admiten "+longitudMaxima+" caracteres en este cuadro de texto.");


       //La caja de texto siguiente a
       //enfocar es opcional. Si se
       //especifica una cadena vacía de
       //caracteres para este nombre, no
       //se hace nada.
         if(siguienteCajaTexto!="")
          document.getElementById(siguienteCajaTexto).focus();
     
      //En este caso cancelamos la tecla presionada,
      //como si no hubiese habido ningún
      //evento:
      //
       return false;
     }




    //Por defecto se aceptará la tecla
    //presionada:
    //
     return true;
   }
  </script>


&nbsp;&nbsp;&nbsp;&nbsp;<input maxlength="4" id="cuadro1" onkeypress="return verificar('cuadro1', 'cuadro2', TIPO_NUMERO, 4, event)" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input maxlength="9" id="cuadro2" onkeypress="return verificar('cuadro2', 'cuadro1', TIPO_TEXTO,  9, event)" /><br />
 </body>
</html>