Blog Reacción Estudio

¡Tu zona de aprendizaje!

Saber cuando se pulsa una tecla con jQuery usando .keypres()

Saber cuando se pulsa una tecla con jQuery usando el evento .keypress()

En el desarrollo web nos puede ser muy útil saber cuando el usuario pulsa cierta tecla, por ejemplo si el usuario pulsa enter en un formulario podemos hacer que se envíe sin tener que pinchar en un botón o para pasar de una imagen a otra en una galería de fotos con las teclas de dirección o para cualquier otra cosa que se nos ocurra.

Muy bien, pues para hacer esto vamos a usar el evento .keypress() de jQuery.

Tenemos el siguiente código:

$(document).ready(function(){

	$(document).keypress(function(e) {
					
		alert("Pulsaste la tecla con código: "+e.which);
					
	});		
			
});

Ésto nos mostrará una alerta con un mensaje indicando qué tecla hemos pulsado y cual es su código correspondiente. Como en el selector ponemos «document» esto ocurrirá cuando pulsemos una tecla en cualquier parte del documento.

Con el siguiente código haríamos lo mismo pero cuando se pulse una tecla dentro de un campo de texto:

El campo de texto

<input type="text" id="buscar" />

El código

$(document).ready(function(){

	$("#buscar").keypress(function(e) {
					
		alert("Pulsaste la tecla dentro del campo de texto con código: "+e.which);
					
	});		
			
});

Ahora bien, para realizar una acción específica cuando se pulse una cierta tecla, deberemos hacer lo siguiente:

$(document).ready(function(){

	$(document).keypress(function(e) {
		
		//13 es el código de la tecla
		if(e.which == 13) {
			alert('Has pulsado enter!');
		}

	});		
			
});

Y si queremos que sea por ejemplo en un campo de texto como antes, pues cambiamos el selector.

$(document).ready(function(){

	$("#buscar").keypress(function(e) {
		
		//13 es el código de la tecla
		if(e.which == 13) {
			alert('Has pulsado enter!');
		}

	});		
			
});

Para cambiar la tecla que se pulsa simplemente habría que cambiar el código de la tecla del código anterior (el 13).

Os dejo a continuación una tabla para saber qué código corresponde a cada tecla:

TeclaCódigo
Barra espaciadora8
Tabulador9
Enter13
Shift16
Ctrl17
Alt18
Pausa/Inter19
Bloq mayus20
Escape27
Av Pag33
Re Pag34
Fin35
Inicio36
Flecha izquierda37
Flecha de arriba38
Flecha derecha39
Flecha de abajo40
Insert45
Delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
Botón izquierdo de windows91
Botón derecho de windows92
Numpad 096
Numpad 197
Numpad 298
Numpad 399
Numpad 4100
Numpad 5101
Numpad 6102
Numpad 7103
Numpad 8104
Numpad 9105
Numpad multiplicar106
Numpad suma107
Numpad restar109
Numpad punto decimal110
Numpad división111
f1112
f2113
f3114
f4115
f5116
f6117
f7118
f8119
f9120
f10121
f11122
f12123
Bloq num144
Bloq desp145
Punto y coma186
Signo igual187
Coma188
Guión189
Punto190
Barra diagonal /191
Acento192
Paréntesis de apertura (219
Barra diagonal invertida \220
Paréntesis de cierre )221
Comilla simple222

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR