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

731

Me gustaría detectar si el usuario ha presionado Enterusando 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 de navegador con ese comando, como si hubiera algún problema de compatibilidad de navegador que debería conocer.

javascript jquery keyboard-events enter jquery-events Chris
fuente
enlace sobre este .keypress () | jQuery API Documentation
Haim Evgi
55
Una de las mejores cosas en los marcos de Javascript es que, por defecto, deberían ser compatibles con todos los navegadores. Manejan las comprobaciones de compatibilidad del navegador para que el usuario no tenga que hacerlo. No he leído el código fuente de JQuery pero dudo que la funcionalidad de pulsación de teclas sea diferente en ese sentido.
miek
2
El único problema de compatibilidad del navegador es que debe usar e.which en lugar de e.keyCode para detectar el código ASCII.
Daniel
1
stackoverflow.com/questions/302122/…
Lemo

Respuestas:

1330

El objetivo de jQuery es que no tiene que preocuparse por las diferencias del navegador. Estoy bastante seguro de que puedes seguir con seguridad entersiendo 13 en todos los navegadores. Con eso en mente, puedes hacer esto:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
Paolo Bergantino
fuente
77
Me estoy vinculando a esto porque lo leí y me dejé la cabeza por qué la pulsación de teclas no funcionaba con IE. (no se unirá a $(window)IE) quirksmode.org/dom/events/keys.html
Incognito
17
e.keyCode no es un navegador 100% cruzado. use e.que en su lugar, como se muestra a continuación
Daniel
15
De la documentación de jQuery "La propiedad event.which normaliza event.keyCode y event.charCode. Se recomienda ver event.which para la entrada de teclado".
Riccardo Galli
20
$ (document) .on ('keypress', function (e) {
user956584
55
Recibo múltiples ejecuciones de la función dada debido a la propagación de eventos (es decir, la alerta se lanza dos veces). Para detener esto, agregue un e.stopPropagation () al final de la función
dpb
129

Escribí un pequeño complemento para que sea más fácil vincular el evento "al presionar la 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
fuente
Esto no funciona para mí (llegué #inputal <input>campo)
Rápli András
1
¿Qué pasa si el elemento #input será dinámico?
Jigar7521
@mplungjan no está seguro de lo que quiere decir con "delegar"
Andrea
$("#input").on("someevent","someselector",function () {})
mplungjan
62

No pude hacer que el código publicado por @Paolo Bergantino funcionara, pero cuando lo cambié $(document)y en e.whichlugar de e.keyCodeeso, encontré que funcionaba sin fallas.

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

Enlace al ejemplo en JS Bin

Ian Roke
fuente
Para mí, lo que no funciona con IE. ¿Funciona para otros?
Umesh Rajbhandari
¿Qué versión de IE? Funciona bien para mí en IE7.
Ian Roke
De la documentación de jQuery "La propiedad event.which normaliza event.keyCode y event.charCode. Se recomienda ver event.which para la entrada de teclado".
Riccardo Galli
52

Encontré que esto es más compatible con todos los navegadores:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
jesal
fuente
1
Su IF ternario se puede acortar a: var keycode = event.keyCode || evento.que;
pistola-pete
29

Puede hacerlo utilizando el controlador de eventos 'keydown' de jquery

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

Uso event.keyy 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 Soportados

Gibolt
fuente
9

Pasé algún tiempo ideando 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');
    }
  });

});
Samuel Kwame Antwi
fuente
8

Hay un método de evento keypress () . El número ASCII de la tecla Intro es 13 y no depende del navegador que se esté utilizando.

Richard Simões
fuente
7

Una extensión menor de la respuesta de Andrea anterior hace que el método auxiliar sea más útil cuando también desee capturar prensas de entrada modificadas (es decir, ctrl-enter o shift-enter). Por ejemplo, esta variante permite la unión 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);
            }
        })
    })
}

(vea también Ctrl + Enter jQuery en TEXTAREA )

joeln
fuente
4

En algunos casos, es posible que deba suprimir la ENTERtecla para un área determinada de una página, pero no para otras áreas de una página, como la página a continuación que contiene un encabezado <div> con una BÚSQUEDA campo de .

Me llevó 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 a JSFiddle Playground : el [Submit]botón no hace nada, pero al presionar ENTERdesde uno de los controles del cuadro de texto no se enviará el formulario.

jp2code
fuente
2

Como el keypressevento no está cubierto por ninguna especificación oficial, el comportamiento real encontrado al usarlo puede diferir entre navegadores, versiones de navegador y 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 fragmento

¡Espero que sea útil!

Zoe_NS
fuente
Para tener en cuenta, la razón por la que keypressya no está en la especificación (más) es que ha quedado en desuso ( MDN ).
YellowAfterlife
entonces,
edité
0

La manera fácil de detectar si el usuario ha presionado enter es usar el número de tecla, el número de tecla enter es = 13 para verificar el valor de la tecla en su 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);
});

Al presionar la tecla Intro obtendrá el resultado como 13. usando el valor de la tecla puede llamar a una función o hacer lo que quiera

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

si desea apuntar a un botón una vez que presione la tecla Intro, puede usar el código 

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

Espero que ayude

usuario2216399
fuente
0

Creo que el método más simple sería usar vainilla javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
Duan Walker
fuente
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
fuente
3
¿Podría agregar un poco de comentarios explicativos para explicarle al autor de la pregunta cómo funciona su código? Gracias.
SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
AzizAhmad
fuente
Esto parece una adaptación de otras respuestas: ¿podría agregar alguna explicación para hacer que la suya sea tan interesante como las otras?
Nico Haase,
0

He utilizado $(document).on("keydown").

En algunos navegadores keyCodeno es compatible. Lo mismo con whichsi keyCodeno es compatible, debe usarlo whichy viceversa.

$(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 fragmento

Justin Liu
fuente