Comunidad de diseño web y desarrollo en internet online

Convertir un ENTER en un TAB con Javascript y jQuery

Hay usuarios que quieren que un ENTER lo mande a otro campo como un TAB. Lo podemos lograr con Javascript y el framework jQuery. No veo que tiene de malo la tecla tabulador, pues ambas están normalmente en los extremos del teclado. Será por complacer a las mayorías en lugar de los zurdos, y si es un zurdo el único que va a usar el sistema.

El caso es que si usamos jQuery, colocamos este capturador del evento, al presionar alguna tecla:

Código en jQuery para capturar las presiones del teclado


Código :

   $(document).ready(function() {
   /* Aquí podría filtrar que controles necesitará manejar,
    * en el caso de incluir un dropbox $('input, select');
    */
   tb = $('input');
    
   if ($.browser.mozilla) {
       $(tb).keypress(enter2tab);
   } else {
       $(tb).keydown(enter2tab);
   }
   });


Código jQuery para cambiar el ENTER por un TAB


Esta función hace que un ENTER se comporte como un TAB, esto hará que al dar ENTER el elemento siguiente obtenga el foco.

Código :

   function enter2tab(e) {
       if (e.keyCode == 13) {
           cb = parseInt($(this).attr('tabindex'));
    
           if ($(':input[tabindex=\'' + (cb + 1) + '\']') != null) {
               $(':input[tabindex=\'' + (cb + 1) + '\']').focus();
               $(':input[tabindex=\'' + (cb + 1) + '\']').select();
               e.preventDefault();
    
               return false;
           }
       }
   }


Hay otras técnicas, pero mi versión opera utilizando la propiedad tabindex de los elementos HTML, lo cual es lo que necesitaba.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate