sábado, 9 de janeiro de 2010

Atualizado: Função JavaScript ou Jquery : Tab = Enter


Quando fui implementar um sistema web em uma empresa que utilizava software um desktop, me deparei com um imprevisto: o vício dos funcionários no sistema antigo. Na hora de utilizar o novo sistema, estavam sempre apertando ENTER  e submetendo o formulário antes da hora.  Diante disso, utilizei as funções abaixo acabando assim com o problema:

=================================================
Resolução mais simples, com Javascript, mas funciona apenas no I.E


function tecla_enter() {
   var e = event.srcElement.tagName;
   if (event.keyCode==13 && e != "TEXTAREA") {
      event.keyCode=9;
   } else {
   if (event.keyCode == 8 && e != "INPUT" && e != "TEXTAREA") {
     event.cancelBubble = true;
     event.returnValue = false; }
   }
}
document.onkeydown=tecla_enter;

================================================
Resolução com Jquery

$(document).ready(function(){
    /* ao pressionar uma tecla em um campo que seja input*/
     $('input').keypress(function(e){
        /* verifica se o evento é Keycode (para IE e outros browsers)
        * se não for pega o evento Which (Firefox)*/
          var tecla = (e.keyCode?e.keyCode:e.which);
           /* verifica se a tecla pressionada foi o ENTER OU TAB*/
          if(tecla == 13 || tecla == 9){
          /* guarda o seletor do campo que foi pressionado Enter */
             campo =  $('input');
          /* pega o indice do elemento*/
             indice = campo.index(this);
          /*soma mais um ao indice e verifica se não é null
           *se não for é porque existe outro elemento*/
             if(campo[indice+1] != null){
               /* adiciona mais 1 no valor do indice */
                  proximo = campo[indice + 1];
               /* passa o foco para o proximo elemento */
                  proximo.focus();
             }
           }
        })
})

Obs: não se esqueça de incluir no documento, o jquery ( <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> )

Marcadores:

5 Comentários:

Anonymous Anônimo disse...

Muito bom seu script... Fui testar o seu exemplo, mas aparentemente ele só funciona usando o IE.
Testei no Firefox, Safari e Chrome...

Existe alguma forma de fazê-lo funcionar nos demais navegadores?

Abraço.

27 de julho de 2010 às 19:42  
Anonymous Pyetro disse...

Muito bom... xD

20 de novembro de 2010 às 21:18  
Anonymous Anônimo disse...

Muito bom!!!!! ajudou bastante

27 de fevereiro de 2012 às 16:09  
Anonymous Anônimo disse...

Existe alguma forma de fazê-lo funcionar nos demais navegadores?
Ex: FF ou Chrome?

22 de agosto de 2012 às 12:44  
Blogger Marcelo Domiciano disse...

Post atualizado.
Com Jquery, funciona em todos os navegadores

19 de novembro de 2012 às 10:33  

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial