jQuery keydown() y keyup(): Detectar la presión del teclado

Repaso a las funciones de jQuery keydown() y keyup() para detectar la presión de las teclas de teclado de una manera sencilla y eficaz.

Para ver las diferencias entre estas funciones y la función keypress() os explico el orden de actuación:

keydown() – Se pulsa la tecla, comienzo de la presión.
keypress() – La tecla está presionada.
keyup() – La tecla es soltada.

Estas 2 funciones jQuery son similares a mousedown() y mouseup() que detectan los clicks del ratón.

Sintaxis de jQuery keydown()

Vamos a ver la sintaxis de keydown() extraída de su web oficial:

$(selector).keydown(function)

1	$(selector).keydown(function)

Os explico el código y sus parámetros:

selector (Obligatorio): Es el elemento donde queremos controlar la pulsación del teclado.
function (Opcional): Función callback a ejecutar.

Sintaxis de jQuery keyup()

Vamos a ver la sintaxis de keyup() extraída de su web oficial:

$(selector).keyup(function)

1	$(selector).keyup(function)

Os explico el código y sus parámetros:

selector (Obligatorio): Es el elemento donde queremos controlar la pulsación del teclado.
function (Opcional): Función a ejecutar.

Antes de ver los ejemplos os recomiendo leer el post:

Funciones de jQuery para detectar la presión del teclado

Ejemplo de jQuery keydown()

Voy a poneros el ejemplo que realicé en el post de jQuery which() en el que se detectaba la tecla que ha sido pulsada:

$(document).ready(function(){
	$("#escribe").keydown(function(event){
		$("#parrafo").text("El código de la tecla " + String.fromCharCode(event.which) + " es: " + event.which);
		$("#escribe").val("");
	}); 
});

$(document).ready(function(){

$("#escribe").keydown(function(event){

$("#parrafo").text("El código de la tecla " + String.fromCharCode(event.which) + " es: " + event.which);

$("#escribe").val("");

});

Explico el código superior:

Detectamos con keydown() la pulsación de una tecla.
Con jQuery text() mostramos en el párrafo con id = ‘parrafo’ la tecla pulsada y su código unicode.
Por último dejamos vacio el input con la función val().

Ejemplo de jQuery keydown() y keyup()

Otro ejemplo para ver las 2 acciones en funcionamiento:

$(document).ready(function(){
   	$("#escribe").keydown(function(){
    		$("#parrafo").text("Tecla pulsada");
	}); 
	$("#escribe").keyup(function(){
    		$("#parrafo").text("Tecla soltada");
	}); 
});

$(document).ready(function(){

$("#escribe").keydown(function(){

$("#parrafo").text("Tecla pulsada");

});

$("#escribe").keyup(function(){

$("#parrafo").text("Tecla soltada");

});

Os explico el código:

Detectamos la pulsación de una tecla en el input con id = ‘escribe’ con keydown().
Después con text() asignamos un texto al elemento con id = ‘parrafo’.
Detectamos que la tecla es soltada en el input con id = ‘escribe’ con keyup().
Después con text() asignamos un texto al elemento con id = ‘parrafo’.

El código HTML del párrafo y el input es el siguiente:

<p><input type="text" id="escribe" value=""></p>
<p id="parrafo">Manten pulsada una tecla y después suéltala.</p>

1 2	<p><input type="text" id="escribe" value=""></p> <p id="parrafo">Manten pulsada una tecla y después suéltala.</p>

Integración de keydown() y keyup() con jQuery on()

Os muestro el ejemplo para ver cómo sería la llamada desde jQuery on():

$("#escribe").on("keydown", function() {
    	$("#parrafo").text("Tecla pulsada");
});
$("#escribe").on("keyup", function() {
    	$("#parrafo").text("Tecla soltada");
});