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?


Respostas:


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


//keyup not compatible with Jquery select(), Keydown is.

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


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


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
    }
 });

});

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>

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;
    }
});

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
    }
});

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


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

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;
 }
});
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.