[Tutorial] Cómo manejar el teclado en jQuery

El día de hoy vamos a aprender a ver cómo usar las teclas del teclado con jQuery. De hecho, para hacer esto vamos a requerir la ayuda de un plugin llamado jQuery++ que como muchos podrían adivinar, le da unas cuantas vitaminas a jQuery para poder realizar algunas funciones extra que con jQuery de otra forma serían un poco más complicadas de realizar (ya de por sí jQuery es fácil con jQuery++ será más). jQuery++ tiene muchas opciones, efectos y eventos, pero para el tutorial nada más vamos a ver el evento del manejo de teclado.

Entonces, no se pierdan el tutorial de a continuación, con lo que sin duda podrán ampliar de forma considerable la forma de interacción entre sus proyectos web porque ahora dominarán el teclado para hacer que cada tecla haga una acción específica.

Demo del tutorial | Sitio de jQuery++

Funcionamiento

El funcionamiento para controlar el teclado es sumamente fácil. Basta indicar antes que nada a qué elemento queremos añadir la función para controlar el teclado. Para controlar el teclado a nivel de todo el sitio web pueden colocar “body”. A continuación como vemos nuestra función debe tener un parámetro, ya que tiene el control de la tecla que se tecleo.

Por cierto, para controlar el teclado hay tres eventos: keypress, keyup, y keydown. La primera se activa mientras la tecla esté presionada, la segunda se activa cuando la tecla que estaba presionada se suelta, y la tercera es cuando una tecla no está presionada y se presiona. Cada una tiene un comportamiento diferente y por eso es importante saber cuándo usar cada evento.

Entonces, usamos la función keyName() para obtener el string de la tecla presionada, lo que nos facilita mucho el trabajo porque no necesitamos caracteres ASCII ni funciones para convertir el número a la letra. Entonces, si se fijan el funcionamiento es extremadamente fácil. Ahora, vamos a ver el tutorial que también es sencillo para comprender el funcionamiento.

HTML

Tenemos nuestros span para que cuando se presiona una tecla se ilumina la letra que se presionó. La clase “letra” es para que todas tengan los mismos estilos y la clase de cada letra es para controlar los efectos.

CSS

Tenemos las clases “.letra” y “.activado” que nos va a servir para activar y desactivar el efecto de que se ilumina la letra, nada fuera de lo común.

Javascript

Entonces, para nuestro código vemos que el funcionamiento para el evento.keyName() necesitamos usar un condicional porque sino no podremos hacer acciones de acuerdo a la letra presionada. Dentro de cada condicional hacemos las acciones que queramos, en este caso le añadimos la clase “activado” a la letra y nada más.

Notas finales

Se puede manipular más que las teclas alfanuméricas, se puede manipular lo siguiente con una pequeña modificación en el string.

• \b – retroceso
• \t – tabulador
• \r - enter
• shift, ctrl, alt
• pause-break, caps, escape, num-lock, scroll-loc, print
• page-up, page-down, end, home, left, up, right, down, insert, delete
• ' ' - space
• f1-12 - function keys pressed
• Symbols: /, ;, :, =, ,, -, ., /, [, \, ], ', "

¿Pudiste hacer el tutorial?¿Qué te pareció?