Pregunta Cómo detectar presionando Enter en el teclado usando jQuery?


Me gustaría detectar si el usuario ha presionado Enter usando jQuery.

¿Cómo es esto posible? ¿Requiere un complemento?

EDITAR: Parece que necesito usar el keypress() método.

Quería saber si alguien sabe si hay problemas con el navegador con ese comando, como ¿hay problemas de compatibilidad del navegador que deba conocer?


614
2018-06-11 06:39


origen


Respuestas:


El objetivo de jQuery es que no tenga que preocuparse por las diferencias del navegador. Estoy bastante seguro de que puedes ir con seguridad entrar siendo 13 en todos los navegadores. Entonces con eso en mente, puedes hacer esto:

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

1153
2018-06-11 06:49



Escribí un pequeño complemento para que sea más fácil vincular el evento "al presionar la tecla presionada".

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

114
2018-04-01 14:00



No pude conseguir que el código publicado por @Paolo Bergantino funcionara pero cuando lo cambié a $(document) y e.which en lugar de e.keyCode entonces descubrí que funcionaba sin fallas.

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

Enlace al ejemplo en JS Bin


57
2018-06-21 10:45



Descubrí que es más compatible con varios navegadores:

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

44
2018-03-13 19:09



Puede hacer esto utilizando el identificador de evento jquery 'keydown'

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

22
2017-10-11 07:20



Hay una presionar tecla () método de evento. El número ascii de la clave Enter es 13 y no depende del navegador que se esté utilizando.


8
2018-06-11 06:45



Pasé algún tiempo pensando en esta solución, espero que ayude a alguien.

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

});

8
2018-01-05 00:28



Una extensión menor de la respuesta de Andrea anterior hace que el método de ayuda sea más útil cuando también puede capturar pulsaciones de entrada modificadas (es decir, ctrl-enter o shift-enter). Por ejemplo, esta variante permite el enlace como:

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

para enviar un formulario cuando el usuario presiona ctrl-enter con foco en el área de texto de ese formulario.

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

(ver también Ctrl + Intro jQuery en TEXTAREA)


6
2018-01-27 02:10



En algunos casos, es posible que deba suprimir el ENTRAR clave para un área determinada de una página pero no para otras áreas de una página, como la siguiente página que contiene un encabezamiento  <div> con un BUSCAR campo.

Me tomó un poco descubrir cómo hacer esto, y estoy publicando este ejemplo simple pero completo aquí para la comunidad.

<!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>

Enlace al JSFiddle Playground: Los [Submit] botón no hace nada, pero presionando ENTRAR desde uno de los controles de cuadro de texto no enviará el formulario.


3
2017-12-02 23:05



Intenta esto para detectar la tecla Intro presionada.

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

Ver demo @ detectar tecla enter presionar sobre el teclado


2
2018-03-28 12:02



Utilizar event.key y moderno JS!

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

o sin jQuery:

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

Documentos de Mozilla

Navegadores compatibles


1
2017-09-05 21:36