Eventos de teclas en una web

Teclado

Eventos de teclado en una web, imagen tomada de BlogVecindad

La evolución de Javascript es impresionante, pasamos de popups y animaciones sencillas, a librerías potentes como Jquery o Mootools. Todo esto es por consecuencia de la adopción del Javascript para la capa de interfaz y animaciones. Algunos expertos dicen que debe ser función de CSS (por eso ya hay animaciones css en su versión 3) y puede tener razón.

Hoy vamos a ver cómo capturar cuando el usuario presiona una tecla y saber qué tecla era, como lo hace Gmail o Twitter. Sería genial por ejemplo que en una aplicación que estemos haciendo, al presionar “G” se guarde una copia de seguridad.

Como todos sabemos, cada uno de los caracteres tiene su código ASCII, en base a eso podemos identificar qué letra se presionó.

Y el código es este, en este caso la tecla será “Escape” ó “Esc” que su valor es 27:


$(document).keyup(function(tecla) {
   if(tecla.keyCode == 27){
      alert("Presionaste escape de tu teclado.:)")
   }
});

Cabe aclarar que usaremos Jquery para que capture el evento de presionar la tecla en cualquier parte del la web.

Vamos por partes: $(document) es usado para que el evento sea global, en cualquier parte de la web. “Keyup” es un evento de Jquery que identifica cuando uno presiona una tecla, function(tecla) sirve para que la tecla capturada se guarde en la variable “tecla”. Por último la condicional “if” con tecla.keyCode == 27, donde 27 es el código ASCII de la tecla Escape.

Espero que este minicódigo les sirva. ¡Saludos!

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , , , , , , ,
Publicado en General, javascript, manuales, trucos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
¡Apareció Linux!

Mirando de lado

Café

Más fotos
A %d blogueros les gusta esto: