Categorías: jQuery

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)

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)

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("");
 }); 
});

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");
 }); 
});

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>

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");
});