Detecta la tecla Intro en un campo de entrada de texto


299

Estoy tratando de hacer una función si se presiona enter mientras está en una entrada específica.

¿Qué estoy haciendo mal?

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

¿Hay una mejor manera de hacer esto que diría, si enter presiona la .input1función do?


1
Posible duplicado del evento Enter key press en JavaScript
Bae

Respuestas:


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


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

¿En qué navegador lo estaba probando? Creo que las versiones anteriores de IE no activan eventos de keyup en el documento (aunque no estoy seguro de esto).
Joseph Silber

2
Su código no funcionaba porque usaba .is () y necesitaba === en lugar de ==. Vea mi respuesta para más detalles.
wesbos

66
@jQuerybeast No es necesario , y event.keyCodees un Number, por lo que JavaScript tomará los mismos pasos con ==o ===.
alex

77
e.que se considera más útil para los navegadores cruzados
mohammad eslahi sani

2
Propiedades which, code, charCodey keyCodeestá en desuso developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , por favor agregue información real a su respuesta.
Sasay

120

event.key === "Enter"

Más reciente y mucho más limpio: uso event.key. ¡No más códigos de números arbitrarios!

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

Si debe usar jQuery:

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

Documentos de Mozilla

Navegadores Soportados


66
felicitaciones por la sencilla versión de JavaScript, no estoy seguro de por qué todos los demás están en jquery
Captain Fantastic

77
Porque, el OP puso su código de ejemplo en jQuery y (así como JavaScript) jQuery está etiquetado.
Tigerrrrr

44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

O simplemente vincular a la entrada en sí

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

Para averiguar qué KeyCode necesita, use el sitio web http://keycode.info


Gracias. He aprendido algo nuevo Por cierto, usé .is () MUCHAS veces, por lo que no es lógico, no estar trabajando. También el ==, nuevamente utilicé dos == para otras situaciones
jQuerybeast

np, siempre deberías estar usando ===
wesbos

12

Intente esto para detectar la Entertecla presionada en un cuadro de texto.

$(function(){

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

});

6

Puede ser demasiado tarde para responder esta pregunta. Pero el siguiente código simplemente evita la tecla Intro. Solo copiar y pegar debería 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

La mejor manera que encontré es usar keydown( keyupno funciona bien para mí).

Nota: También desactivé el envío del formulario porque, por lo general, cuando desea realizar algunas acciones al presionar la tecla Intro, lo único que piensa que no le gusta es enviar el formulario :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

event.keyCode es un evento obsoleto, que no lo es, así que esto es mejor
Alex

3

La solución que funciona para mí es la siguiente

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

1

Intente esto para detectar la tecla Intro presionada en un cuadro de texto.

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

MANIFESTACIÓN


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

0

Este código manejó cada entrada para mí en todo el sitio. Comprueba la TECLA ENTER dentro de un campo INPUT y no se detiene en TEXTAREA u otros lugares.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.