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:
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:
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:
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:
1 2 3 4 5 6 |
$(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:
1 2 3 4 5 6 7 8 |
$(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:
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():
1 2 3 4 5 6 |
$("#escribe").on("keydown", function() { $("#parrafo").text("Tecla pulsada"); }); $("#escribe").on("keyup", function() { $("#parrafo").text("Tecla soltada"); }); |
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: