Detectar a tecla Enter em um campo de entrada de texto

299

Estou tentando fazer uma função se enter for pressionado enquanto estiver em uma entrada específica.

O que estou fazendo de errado?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

Existe uma maneira melhor de fazer isso que diria, se enter pressionado em .input1do function?

jQuerybeast
fonte

Respostas:

499
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.
Joseph Silber
fonte
Em qual navegador você estava testando? Acho que versões mais antigas do IE não acionam eventos de keyup no documento (embora não tenha certeza disso).
Joseph Silber
2
Seu código não estava funcionando porque você usou .is () e precisava de === em vez de ==. Veja minha resposta para mais alguns detalhes.
Wsbos
6
@jQuerybeast Não é necessário e event.keyCodeé um Number, então o JavaScript seguirá as mesmas etapas com ==ou ===.
alex
7
e.which é declarado ser navegadores transversais mais úteis
Mohammad eslahi sani
2
Propriedades which, code, charCodee keyCodeestá obsoleta developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , adicione informações reais para a sua resposta.
Sasay 03/10/19
120

event.key === "Enter"

Mais recente e muito mais limpo: use event.key. Chega de códigos numéricos arbitrários!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

Se você deve usar o jQuery:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Documentos do Mozilla

Navegadores suportados

Gibolt
fonte
6
elogios para a versão javascript simples, não tenho certeza por isso que todos os outros estão em jquery
Captain Fantastic
7
Porque, o OP colocou seu código de exemplo no jQuery e (assim como no JavaScript) o jQuery é marcado.
Tigerrrrr
44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Ou apenas vincule à própria entrada

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

Para descobrir qual código de chave você precisa, use o site http://keycode.info

wesbos
fonte
Obrigado. Eu aprendi algo novo. A propósito, eu usei .is () muitas vezes, então não é lógico, não estar funcionando. Também o ==, mais uma vez eu usei dois == para outras situações
jQuerybeast
np, você deve sempre estar usando ===
wesbos
12

Tente isso para detectar a Entertecla pressionada em uma caixa de texto.

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});
ShankarSangoli
fonte
6

Pode ser tarde demais para responder a essa pergunta. Mas o código a seguir simplesmente impede a tecla Enter. Basta copiar e colar deve funcionar.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>
Indra Kumar S
fonte
6

A melhor maneira que eu encontrei é usar keydown(o keyupnão funciona bem para mim).

Nota: Eu também desabilitei o envio do formulário, porque geralmente quando você gosta de executar algumas ações ao pressionar a tecla Enter, o único que você não gosta é enviar o formulário :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});
Roy Shoa
fonte
event.keyCode está obsoleto event.which não é, então isso é melhor
Alex
3

A solução que funciona para mim é a seguinte

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});
Jorge Santos Neill
fonte
1

Tente isso para detectar a tecla Enter pressionada em uma caixa de texto.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO

jonathan klevin
fonte
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
fonte
0

Esse código tratou de todas as entradas para mim em todo o site. Ele verifica a tecla ENTER dentro de um campo INPUT e não para na TEXTAREA ou em outros locais.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Umar Niazi
fonte