> Manuales > Manual de jQuery

Cómo trabajar con eventos de teclado en jQuery y saber qué teclas han pulsado los usuarios, a través de la propiedad which del objeto evento.

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 con los eventos de teclado hay algo que todavía no hemos visto y que resulta fundamental. Se trata 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, para hacer cosas en nuestros scripts personalizadas en función de la tecla presionada por el usuario.

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.

Nota: Si pulsamos y soltamos una tecla, primero se produce un evento keydown, al presionar la tecla, luego un keypress y por último un keyup al soltarla.

Si hacemos una pulsación prolongada de una tecla este esquema varía, pues se produce un keydown y luego un keypress. Mientras se mantiene pulsada la tecla en bucle se van produciendo eventos keydown y keypress, repetidas veces hasta que finalmente se suelta la tecla y se produce un keyup.

En el caso de las teclas CTRL, Mayúsculas o ALT, se producen múltiples keydown hasta que se suelta la tecla y se produce un keyup. Es decir, al pulsar una de estas teclas no se produce el evento keypress.

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 no 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 type simplemente 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 propiedad which, 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).

Esto se puede ver en marcha en una página aparte.

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>

Podemos ver el ejemplo en marcha en una página aparte.

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 .

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual