javascript - detectar - keypress jquery ejemplos
¿Cómo detectar presionando Enter en el teclado usando jQuery? (13)
Utilice 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
}
});
Me gustaría detectar si el usuario ha presionado Enter usando jQuery.
¿Cómo es esto posible? ¿Requiere un plugin?
EDIT: Parece que necesito usar el método keypress() .
Quería saber si alguien sabe si hay problemas de navegador con ese comando, ¿hay algún problema de compatibilidad con el navegador que deba conocer?
Creo que el método más simple sería usar javacript de vanilla :
document.onkeyup = function(event) {
if (event.key === 13){
alert("enter was pressed");
}
}
El punto central de jQuery es que no tiene que preocuparse por las diferencias de navegador. Estoy bastante seguro de que puedes ir con seguridad con ser 13 en todos los navegadores. Así que con eso en mente, puedes hacer esto:
$(document).keypress(function(e) {
if(e.which == 13) {
alert(''You pressed enter!'');
}
});
En algunos casos, es posible que deba suprimir la tecla ENTRAR para un área determinada de una página pero no para otras áreas de la página, como la página siguiente que contiene un encabezado <div> con un campo BUSCAR .
Me tomó un poco descubrir cómo hacer esto, y estoy publicando este sencillo pero completo ejemplo 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 botón [Submit] no hace nada, pero presionar ENTRAR desde uno de los controles del Cuadro de texto no enviará el formulario.
Encontré que esto 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'');
}
});
Escribí un pequeño complemento para facilitar el enlace del evento "al presionar la tecla":
$.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!'');
})
Hay un método de evento keypress() . El número ASCII de la tecla Enter es 13 y no depende de qué navegador se esté utilizando.
Intenta esto para detectar la tecla Enter presionada.
$(document).on("keypress", function(e){
if(e.which == 13){
alert("You''ve pressed the enter key!");
}
});
Ver demo @ detectar tecla enter presionar en el teclado
La forma fácil de detectar si el usuario ha pulsado Intro es usar el número de clave, el número de clave de ingreso es = 13 para verificar el valor de la clave 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);
});
presionando la tecla enter obtendrá el resultado como 13. usando el valor clave puede llamar a una función o hacer lo que desee
$(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 se presiona la tecla enter puede usar el código
$(document).bind(''keypress'', function(e){
if(e.which === 13) { // return
$(''#butonname'').trigger(''click'');
}
});
Espero te ayude
No pude hacer que el código publicado por @Paolo Bergantino funcionara, pero cuando lo cambié a $(document) y e.which lugar de e.keyCode , encontré que funcionaba sin fallas.
$(document).keypress(function(e) {
if(e.which == 13) {
alert(''You pressed enter!'');
}
});
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'');
}
});
});
Puedes hacerlo usando el controlador de eventos jquery ''keydown''
$( "#start" ).on( "keydown", function(event) {
if(event.which == 13)
alert("Entered!");
});
Una extensión menor de la respuesta anterior de Andrea hace que el método de ayuda sea más útil cuando también desee capturar las pulsaciones de entrada modificadas (es decir, ctrl-enter o shift-enter). Por ejemplo, esta variante permite unir como:
$(''textarea'').enterKey(function() {$(this).closest(''form'').submit(); }, ''ctrl'')
para enviar un formulario cuando el usuario presiona ctrl-enter con enfoque 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 )