¿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.



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

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

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

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


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

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

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


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

});


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 )


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.



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>

¡Espero que sea útil!


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


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

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

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

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>

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.