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: