Como detectar combinación de teclas en un sitio web con Javascript
Las aplicaciones web de hoy en día estan tendiendo a buscar la funcionalidad de lo que puede hacer una aplicación de escritorio, muchas veces son los pequeños detalles que nos acercan mas a ello, y si hay algo que los usuarios utilizan mucho es la combinación de teclas.
La combinacion de teclas nos evita, en muchos casos, tener que navegar entre opciones de menu para activar una función, iniciar un proceso o levantar algo en general. En OpenJS he encontrado una librería que me ha venido excelente para activar funciones presionando teclas claves o haciendo combinación de estas.
Lo que tenemos que hacer es descargar la librería shortcut.js, agregarla a nuestro proyecto y empezar a utilizarla como este ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script src="shortcut.js"></script> <script type="text/javascript"> shortcut.add("F2", function () { alert("Tecla F2"); }, { "type": "keydown", "propagate": true, "target": document }); shortcut.add("Ctrl+G", function () { alert("Combinación de teclas Ctrl+G"); }, { "type": "keydown", "propagate": true, "target": document }); </script> </head> <body> <h1>Detectar combinación de teclas</h1> <p>Presiona F2 o Ctrl+G</p> </body> </html> |
En este ejemplo podes presionar la tecla F2 o Ctrl+G para activar los mensajes de alerta. Para más información se puede consultar OpenJS.
DEMO
Entradas relacionadas
Sobre el Autor
hug0
Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla
Muchas Gracias, me ha servido mucho tu ejemplo.