Explicaciones y ejemplos de trabajo con eventos de teclado en jQuery. Cómo saber qué teclas han pulsado los usuarios, a través de la propiedad which del objeto evento recibido en el manejador.
Estamos aprendiendo sobre los eventos en jQuery y ahora vamos a hacer una práctica con los eventos de teclado, es decir, con la definición de acciones cuando el usuario presiona las teclas. La manera de trabajar con eventos de teclado no difiere mucho de la que ya hemos conocido en el manual de jQuery, pero hay algunos detalles que consideramos importantes y que queremos ver en este artículo con calma.
Lo que resulta fundamental a la hora de trabajar con eventos de teclado en jQuery y que no hemos conocido todavía, consiste en que, cuando se produce el evento de teclado, en el objeto evento de jQuery tenemos una propiedad que nos sirve para saber cuál es la tecla pulsada. Esa información es esencial para poder hacer cosas en nuestros scripts, personalizadas en función de la tecla presionada por el usuario.
Tipos de eventos de teclado en jQuery
Los eventos de teclado, en principio, son tres, como vimos en el artículo Manejadores de eventos en jQuery, keydown, keypress y keyup. Realmente no actúan por separado, sino que se produce una combinación de éstos al ir presionando y soltando las teclas, como se puede deducir de las explicaciones del mencionado artículo.
Los comportamientos típicos de estos eventos son los siguientes:
- Si pulsamos y soltamos una tecla, primero se produce un evento
keydown, al presionar la tecla, luego unkeypressy por último unkeyupal soltarla. - Por otra parte, si hacemos una pulsación prolongada de una tecla este esquema varía, pues se produce un
keydowny luego unkeypress. Mientras se mantiene pulsada la tecla en bucle se van produciendo eventoskeydownykeypress, repetidas veces hasta que finalmente se suelta la tecla y se produce unkeyup. - En el caso de las teclas
CTRL,MayúsculasoALT, se producen múltipleskeydownhasta que se suelta la tecla y se produce unkeyup. Es decir, al pulsar una de estas teclas no se produce el eventokeypress.
Secuencia de eventos de teclado
Vamos a aprender cuál es la secuencia con la que se producen los eventos de teclado, con un pequeño ejemplo práctico. Se trata de hacer una función que detecte cualquier evento de teclado, muestre el tipo de evento que ha ocurrido y lo muestre en la página. Así podremos ver los eventos que se producen, sean cuales sean, y en qué orden.
Primero podríamos definir la función que va a procesar los eventos:
function operaEvento(evento){
$("#loescrito").html($("#loescrito").html() + evento.type + ": " + evento.which + ", ")
}
Esta función recibe el evento y escribe en una capa el tipo de evento, que se consigue con la propiedad type del objeto evento, y luego un código de la tecla pulsada, que se consigue con la propiedad which del objeto evento.
Nota: el tipo de evento no lo habíamos visto todavía, pero es otra de las propiedades que encontramos en el objeto evento que recibe la función que tiene el código a ejecutar por el evento. Esta propiedad
typesimplemente es un string con la cadena que identifica el tipo de evento que se está procesando ("keydown", "keyup", "click" o cualquier otro). La tecla pulsada, que se obtiene con la propiedadwhich, la trataremos con detalle dentro de poco.
Ahora podríamos hacer que cualquier evento de teclado invoque esta función con el código:
$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);
Como hemos asociado los eventos al objeto document de Javascript, estos eventos se pondrán en marcha cada vez que se pulse una tecla, independientemente de dónde esté el foco de la aplicación (o donde esté escribiendo el usuario).
Código completo del ejercicio de eventos de teclado
Creo que merece la pena presentar el código completo del anterior ejemplo:
<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
function operaEvento(evento){
$("#loescrito").html($("#loescrito").html() + evento.type + ": " + evento.which + ", ")
}
$(document).ready(function(){
$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);
})
</script>
</head>
<body>
<h1>Eventos de teclado en jQuery</h1>
<div id="loescrito"></div>
</body>
</html>
Averiguar qué tecla fue pulsada A través de la propiedad which del objeto evento de jQuery podemos saber qué tecla ha sido pulsada cuando se produce el evento de teclado. Esta propiedad contiene un número entero con el código Unicode de la tecla pulsada. Haremos un ejemplo para explicarlo. Tenemos un textarea y escribiendo algo en él, mostraremos la tecla pulsada en una capa, independiente del textarea. Este será el código HTML que necesitaremos para el ejemplo:
<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
Ahora definiremos con jQuery el evento keypress, para mostrar la tecla pulsada.
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which));
});
Con e.preventDefault(); hacemos que no se escriba nada en el textarea, osea, estamos inhibiendo el comportamiento habitual del evento, que es escribir las teclas en el textarea, que no tiene mucho que ver con nuestro ejemplo, pero que está bien para ver cómo funciona.
Luego escribimos en la capa con id "loescrito" el código de Unicode de esa tecla y luego su conversión a un carácter normal, a través de la función estática de la clase String fromCharCode().
El código completo del ejercicio es el siguiente.
<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which))
});
})
</script>
</head>
<body>
<h1>Eventos de teclado en jQuery</h1>
<h2>Averiguar qué tecla se está pulsando</h2>
<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
</body>
</html>
Con esto habremos aprendido ya a manejar eventos de teclado, aunque os recomendamos experimentar vosotros mismos con este tipo de eventos modificando el script y ver nuestro Videotutorial: manejo de eventos al detalle en jQuery.
En próximos artículos podremos aprender usos de estos tipos de eventos en jQuery y también encontrarás algunas aplicaciones en el Taller de jQuery. Si quieres ver una aplicación en Javascript nativo te recomendamos las faq: Cómo detectar la pulsación de las teclas de los cursores, con Javascript, Cómo detectar que se ha pulsado la barra espaciadora en un elemento mediante Javascript o Cómo detectar que se ha pulsado la tecla ENTER sobre un campo INPUT.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...