Cómo detectar pulsar Intro en el teclado usando jQuery?
-
13-09-2019 - |
Pregunta
Me gustaría para detectar si el usuario ha pulsado Intro usando jQuery.
¿Cómo es esto posible? ¿Se requiere un plugin?
EDIT: Parece que tengo que usar el método href="http://docs.jquery.com/Events/keypress" rel="noreferrer"> keypress()
.
Yo quería saber si alguien sabe si hay problemas con el navegador con ese comando - al igual que hay problemas de compatibilidad del navegador que debería saber
Solución
El punto de jQuery es que usted no tiene que preocuparse por las diferencias navegador. Estoy bastante seguro de que puede ir de forma segura con introduzca siendo 13 en todos los navegadores. Así que con esto en mente, usted puede hacer esto:
$(document).on('keypress',function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
Otros consejos
escribí un pequeño plugin para que sea más fácil para obligar a la "en la tecla enter presionado" un evento:
$.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!');
})
No pude obtener el código publicado por @Paolo Bergantino a trabajar pero cuando cambió a $(document)
y e.which
en lugar de e.keyCode
Entonces me encontré con que funcione sin fallos.
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
Me pareció que para ser más compatible entre navegadores:
$(document).keypress(function(event) {
var keycode = event.keyCode || event.which;
if(keycode == '13') {
alert('You pressed a "enter" key in somewhere');
}
});
Usted puede hacer esto mediante el jQuery 'keyDown' identificador de evento
$( "#start" ).on( "keydown", function(event) {
if(event.which == 13)
alert("Entered!");
});
Me pasé algún tiempo dar con 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');
}
});
});
Hay una pulsación de tecla () método de evento. número ASCII de la tecla de entrada es 13 y no depende de lo que se está utilizando el navegador.
Uso 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
}
});
Un menor extensión de la respuesta de Andrea anterior hace que el método de ayuda más útil cuando usted también puede querer capturar prensas modificados introducir (es decir ctrl-shift-entrar o entrar). 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 el foco en área de texto de esa forma.
$.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);
}
})
})
}
(véase también Ctrl + Enter jQuery en el área de texto )
En algunos casos, puede que tenga que suprimir el ENTER clave para una determinada área de una página, pero no para otras áreas de una página, como la siguiente página que contiene un cabecera <div>
con un BUSCAR campo.
Me tomó un poco para encontrar la manera de hacer esto, y estoy publicando este ejemplo sencillo pero completo hasta aquí por 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 juegos : El botón [Submit]
no hace nada, pero al presionar ENTER de uno de los controles de cuadro de texto no va a enviar el formulario.
Probar para detectar la tecla Intro presionado.
$(document).on("keypress", function(e){
if(e.which == 13){
alert("You've pressed the enter key!");
}
});
Ver demostración @ detectar introducir pulsación de tecla en el teclado
Utilizando el método de pulsación de tecla para detectar y pulsando ENTER en el teclado usando jQuery?
https://www.tutsmake.com/ jquery-pulsación de tecla-evento-detect-enter-clave presionado /
$('#someTextBox').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
event.stopPropagation();
});
<html>
<head>
<title>jQuery keypress() Method To Detect Enter key press or not Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Write something here & press enter</h1>
<label>TextBox Area: </label>
<input id="someTextBox" type="text" size="100" />
</body>
</html>
La manera fácil de detectar si el usuario ha pulsado entrar es el uso de número de clave de la introduzca el número de clave es = 13 para comprobar el valor de clave en el 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 pulsar la tecla obtendrá como resultado un 13 intro. utilizando el valor de la clave se puede llamar a una función o hacer lo que desea
$(document).keypress(function(e) {
if(e.which == 13) {
console.log("User entered Enter key");
// the code you want to run
}
});
Si desea orientar un botón una vez la tecla enter se presiona puede utilizar el código
$(document).bind('keypress', function(e){
if(e.which === 13) { // return
$('#butonname').trigger('click');
}
});
Espero que ayude
Creo que el método más simple sería utilizar de vainilla javacript:
document.onkeyup = function(event) {
if (event.key === 13){
alert("enter was pressed");
}
}
$(function(){
$('.modal-content').keypress(function(e){
debugger
var id = this.children[2].children[0].id;
if(e.which == 13) {
e.preventDefault();
$("#"+id).click();
}
})
});
$(document).keyup(function(e) {
if(e.key === 'Enter') {
//Do the stuff
}
});