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?

javascript jquery keyboard-events enter jquery-events chris
fonte

link sobre este arquivo .keypress () | Documentação da API do jQuery

Haim Evgi 11/11/09

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

1

stackoverflow.com/questions/302122/…

Lemo

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

Paolo Bergantino
fonte

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

Andrea
fonte

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

Ian Roke
fonte

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

jesal
fonte

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

Nasruddin
fonte

11

Use `event.key`e 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

Gibolt
fonte

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

});

Samuel Kwame Antwi
fonte

8

Existe um método de evento keypress () . O número ascii da tecla Enter é 13 e não depende de qual navegador está sendo usado.

Richard Simões
fonte

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 )

joeln
fonte

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.

jp2code
fonte

4

Tente isso para detectar a tecla Enter pressionada.

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

Veja demo @ detect pressione a tecla Enter no teclado

jonathan klevin
fonte

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>

Expandir snippet

Espero que seja útil!

Zoe_NS
fonte

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

user2216399
fonte

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

Duan Walker
fonte

0

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

Tayfun Açıkgöz
fonte

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

AzizAhmad
fonte

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>

Expandir snippet

Justin Liu
fonte

Como detectar pressionando Enter no teclado usando jQuery?

Respostas:

Use `event.key`e JS moderno!

Como detectar pressionando Enter no teclado usando jQuery?

Respostas:

Use event.keye JS moderno!

Use `event.key`e JS moderno!