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:

Tecla Código
Barra espaciadora 8
Tabulador 9
Enter 13
Shift 16
Ctrl 17
Alt 18
Pausa/Inter 19
Bloq mayus 20
Escape 27
Av Pag 33
Re Pag 34
Fin 35
Inicio 36
Flecha izquierda 37
Flecha de arriba 38
Flecha derecha 39
Flecha de abajo 40
Insert 45
Delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
Botón izquierdo de windows 91
Botón derecho de windows 92
Numpad 0 96
Numpad 1 97
Numpad 2 98
Numpad 3 99
Numpad 4 100
Numpad 5 101
Numpad 6 102
Numpad 7 103
Numpad 8 104
Numpad 9 105
Numpad multiplicar 106
Numpad suma 107
Numpad restar 109
Numpad punto decimal 110
Numpad división 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
Bloq num 144
Bloq desp 145
Punto y coma 186
Signo igual 187
Coma 188
Guión 189
Punto 190
Barra diagonal / 191
Acento 192
Paréntesis de apertura ( 219
Barra diagonal invertida \ 220
Paréntesis de cierre ) 221
Comilla simple 222
  • jose

    ES posible meter un timeout?

  • arosales

    Creo que la tabla de códigos esta mal, a mi me tira otros codigos

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