Como detectar pressionando Enter no teclado usando jQuery?


731

Gostaria de detectar se o usuário pressionou Enterusando o jQuery.

Como isso é possível? Requer um plugin?

Edição: Parece que eu preciso usar o keypress()método.

Eu queria saber se alguém sabe se há problemas no navegador com esse comando - como existem problemas de compatibilidade do navegador que eu deva conhecer?



5
Uma das melhores coisas nas estruturas Javascript é que elas devem ser, por padrão, compatíveis com vários navegadores. Eles lidam com as verificações de compatibilidade do navegador para que o usuário não precise. Não li o código fonte do JQuery, mas duvido que a funcionalidade de pressionar as teclas seja diferente nesse sentido.
Miek

2
o único problema de compatibilidade do navegador é que você deve usar o e.which em vez do e.keyCode para detectar o código ascii.
Daniel

Respostas:


1330

O ponto principal do jQuery é que você não precisa se preocupar com as diferenças do navegador. Tenho certeza de que você pode enterter 13 anos em todos os navegadores. Então, com isso em mente, você pode fazer o seguinte:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

7
Estou ligando a isso porque li isso e deixei de coçar a cabeça por que o pressionamento de tecla não funcionou com o IE. (não será vinculado ao $(window)IE) quirksmode.org/dom/events/keys.html
Incognito

17
O e.keyCode não é 100% entre navegadores. use e.which como mostrado abaixo
Daniel

15
Na documentação do jQuery "A propriedade event.which normaliza event.keyCode e event.charCode. É recomendável assistir a event.which na entrada da tecla do teclado".
Riccardo Galli

20
$ (document) .on ('keypress', function (e) {
user956584

5
Estou recebendo várias execuções da função fornecida devido à propagação do evento (ou seja, o alerta está sendo lançado duas vezes). Para acabar com isso, adicionar um e.stopPropagation () no final da função
dpb

129

Eu escrevi um pequeno plug-in para facilitar a vinculação do evento "ao pressionar a tecla Enter":

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Uso:

$("#input").enterKey(function () {
    alert('Enter!');
})

Isso não funciona para mim (eu tenho #inputno <input>campo)
Rápli András

1
E se o elemento #input for dinâmico?
Jigar7521

@mplungjan não tenho certeza que você entende por "delegar"
Andrea

$("#input").on("someevent","someselector",function () {})
precisa saber é o seguinte

62

Não consegui que o código postado por @Paolo Bergantino funcionasse, mas quando mudei para $(document)e, em e.whichvez disso e.keyCode, achei que funcionava sem falhas.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Link para o exemplo no JS Bin


Para mim, e.que não funciona com o IE. Isso funciona para os outros?
Umesh Rajbhandari

Qual versão do IE? Funciona bem para mim no IE7.
21812 Ian Roke

Na documentação do jQuery "A propriedade event.which normaliza event.keyCode e event.charCode. É recomendável assistir a event.which na entrada da tecla do teclado".
Riccardo Galli

52

Achei isso mais compatível com vários navegadores:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

1
Seu IF ternário pode ser reduzido para: var keycode = event.keyCode || event.which;
Pistol-pete

29

Você pode fazer isso usando o identificador de evento jquery 'keydown'

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

11

Use event.keye JS moderno!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

ou sem jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Documentos do Mozilla

Navegadores suportados


9

Passei algum tempo inventando esta solução, espero que ajude alguém.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});


7

Uma pequena extensão da resposta de Andrea acima torna o método auxiliar mais útil quando você também pode capturar pressionamentos de tecla modificados (por exemplo, ctrl-enter ou shift-enter). Por exemplo, esta variante permite a ligação como:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

para enviar um formulário quando o usuário pressionar ctrl-enter com foco na área de texto desse formulário.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(veja também Ctrl + Enter jQuery em TEXTAREA )


4

Em alguns casos, pode ser necessário suprimir a ENTERchave para uma determinada área de uma página, mas não para outras áreas de uma página, como a página abaixo que contém um cabeçalho <div> com um campo SEARCH .

Demorei um pouco para descobrir como fazer isso, e estou postando este exemplo simples e completo aqui para a comunidade.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Link para o JSFiddle Playground : O [Submit]botão não faz nada, mas pressionar ENTERum dos controles da Caixa de texto não enviará o formulário.



2

Como o keypressevento não é coberto por nenhuma especificação oficial, o comportamento real encontrado ao usá-lo pode diferir entre navegadores, versões e plataformas.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Espero que seja útil!


Para observar, o motivo pelo qual keypressnão está nas especificações (mais) é que foi preterido ( MDN ).
YellowAfterlife

então editei ... tnx <3
Zoe_NS 14/12

0

A maneira mais fácil de detectar se o usuário pressionou enter é usar o número da tecla, o número da tecla enter é = 13 para verificar o valor da tecla no seu dispositivo

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

pressionando a tecla Enter, você obterá o resultado como 13. usando o valor da chave, você pode chamar uma função ou fazer o que quiser

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

se você quiser direcionar um botão depois que a tecla Enter for pressionada, você pode usar o código

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Espero que ajude


0

Eu acho que o método mais simples seria usar javacript de baunilha :

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

0
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

3
Você poderia adicionar alguns comentários explicativos para explicar ao solicitante como seu código funciona - obrigado.
precisa saber é o seguinte

0
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

Isso parece uma adaptação de outras respostas - você poderia adicionar alguma explicação para tornar a sua tão interessante quanto as outras?
Nico Haase

0

Eu usei $(document).on("keydown").

Em alguns navegadores keyCodenão é suportado. O mesmo com whicho caso, keyCodese não for suportado, você precisará usar whiche vice-versa.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.