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?

jQuerybeast
fuente
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.
Joseph Silber
fuente
¿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

Gibolt
fuente
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

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

});
ShankarSangoli
fuente
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>
Indra Kumar S
fuente
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;
    }
});
Roy Shoa
fuente
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
    }
});
Jorge Santos Neill
fuente
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

jonathan klevin
fuente
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
fuente
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;
 }
});
Umar Niazi
fuente