Manejando eventos del teclado con Javascript

agosto 22, 2007 at 3:45 pm 12 comentarios

En un foro donde soy Administrador, el cual no comentare, preguntaron como saber cuando un usuario presiona una Tecla de Función (F1, F2, F3, …) y asignarle una acción. Sin duda asignar una acción a una tecla o a una combinación de tecla es de gran ayuda cuando realizamos sistemas, como en un editor, ctrl+b equivale a iniciar o cerrar texto negrita o ctrl+s es guardar y submitear el formulario, entre otros, ¿Pero como se ocupan?.

Cada tecla tiene asignado un numero en javascript, algunos de estos son:

Tecla Código Tecla Código Tecla Código
backspace 8 tab 9 enter 13
shift 16 ctrl 17 alt 18
pause/break 19 caps lock 20 escape 27
page up 33 page down 34 end 35
home 36 left arrow 37 up arrow 38
right arrow 39 down arrow 40 insert 45
delete 46 0 48 1 49
2 50 3 51 4 52
5 53 6 54 7 55
8 56 9 57 a 65
b 66 c 67 d 68
e 69 f 70 g 71
h 72 i 73 j 74
k 75 l 76 m 77
n 78 o 79 p 80
q 81 r 82 s 83
t 84 u 85 v 86
w 87 x 88 y 89
z 90 left window key 91 right window key 92
select key 93 numpad 0 96 numpad 1 97
numpad 2 98 numpad 3 99 numpad 4 100
numpad 5 101 numpad 6 102 numpad 7 103
numpad 8 104 numpad 9 105 multiply 106
add 107 subtract 109 decimal point 110
divide 111 f1 112 f2 113
f3 114 f4 115 f5 116
f6 117 f7 118 f8 119
f9 120 f10 121 f11 122
f12 123 num lock 144 scroll lock 145
semi-colon 186 equal sign 187 comma 188
dash 189 period 190 forward slash 191
grave accent 192 open bracket 219 back slash 220
close braket 221 single quote 222

Fuente: MediaEvent.de

Ya conociendo los números correspondientes a cada tecla solo nos basta con trabajar con Eventos en JavaScript, por ejemplo si queremos ver que tecla presiono en un input el código seria el siguiente:

<input type="text" onkeydown="tecla(event);" />

y el Javascript

<script type="text/javascript">
function tecla (e)
{
    var evt = e ? e : event;
    var key = window.Event ? evt.which : evt.keyCode;
    alert (key);
}
</script>

Podemos hacer un if y dependiendo de la tecla (según su key) realizar alguna acción, como llamar una función por ejemplo o no permitir el ingreso en el input de caracteres no permitidos, por ejemplo si queremos que en un input no ingresen letras sino solo números, el código y su función seria algo así:

El input:

<input type="text" onkeypress="return num(event);" />

El Javascript:

<script type="text/javascript">
function num(e) {
    evt = e ? e : event;
    tcl = (window.Event) ? evt.which : evt.keyCode;
    if ((tcl < 48 || tcl > 57) && (tcl != 8 && tcl != 0 && tcl != 46))
    {
        return false;
    }
    return true;
}
</script>

Si se fijan, estamos manejando eventos en tab o etiquetas, si lo quieren para un documento completo simplemente deben asignarlo al objecto document. En si asociar una tecla al documento completo es mas complejo, por el hecho de que en algunos navegadores no funciona, en otro hay que atachar el evento (addEventListener, attachEvent, etc) y también existen inconsistencia entre navegadores.

Es por esto que les presento una pequeña clase javascript que nos ayudara a manejar estos eventos, agregar eventos, quitar eventos o crear eventos con combinaciones de teclas (si combinaciones como por ejemplo ctrl+1, ctrl+shift+2, etc). La clase se llama shortcut.js y la pueden encontrar en OpenJS.

Es tan simple como por ejemplo, si quieren agregar un evento al documento el código seria el siguiente:

<script src="shortcut.js" type="text/javascript"></script>

<script type="text/javascript">
// formato shortcut.add(combinación, función[, opciones]);

shortcut.add("Ctrl+h",function() {

    alert("Hola Mundo");

});

shortcut.add("Ctrl+Shift+h",function() {

    alert("Hola Mundo te dije");

});

</script>

Una vez ingresado ese código en el head de tu documento, simplemente presiona ctrl+h y ctrl+shift+h y aparecerán los mensajes. Como vez nos puede ser muy útil, al mismo tiempo puedes asociar un evento no tan solo al documento completo, sino a un elemento en si, como un input (como veíamos anteriormente), además puedes decir si quieres que funcione sobre un formulario o no, etc., todo esto con el tercer parámetro.

Tengan en cuenta, que la clase en si creció bastante desde su primera aparición pero aun sigue estando en beta, pero no por esto quiere decir que no funcione, la clase funcione bastante bien y realiza su tarea sin complicarnos.

Enlace: Handling Keyboard Shortcuts in JavaScript
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

About these ads

Entry filed under: JavaScript - AJAX, Recursos. Tags: .

Cheat Sheet de Linea de Comandos en Linux Ver archivos CHM en Linux

12 comentarios Add your own

  • 1. Leticia  |  marzo 4, 2008 en 9:39 am

    Probé el ejemplo descripto en esta pagina para asociarle el evento “ctrl+h” al documento, utilizando la clase shortcut.js, y no me funciona. Lo hice en internet explorer 6.0 y en mozilla firefox 2.0.

    por qué puede ser que no me funcione?

    Responder
  • 2. Leticia  |  marzo 4, 2008 en 10:39 am

    OK, ya logré que me funcionara!
    muchas gracias!

    Responder
  • 3. javawordpress  |  mayo 26, 2008 en 5:33 pm

    ¿como puedes escribir sobre javascript en wordpress.com si no permite utilizarlo nunca?

    vota en http://javawordpress.wordpress.com

    Responder
  • 4. casino pc  |  julio 8, 2008 en 7:48 am

    casino pc…

    Go play free black jack online slots gioca poker online gratis poker on line gratis play blackjack online free…

    Responder
  • 5. urko1982  |  octubre 25, 2008 en 12:21 pm

    Muchas gracias por compartir tus conocimientos. Me ha sido muy útil.

    Responder
  • 6. paz  |  noviembre 17, 2008 en 3:56 pm

    gracias por el gran aporte me es de mucha utilidad….
    hojala sigan compartiendo mas conocimientos….

    Responder
  • 7. Carlos_Cruz  |  junio 28, 2009 en 7:42 pm

    Muy agradecido por invertir tu tiempo en este articulo. Me ha sido de Mucha Utilidad. Salufos

    Responder
  • 8. MADrod  |  octubre 22, 2009 en 3:08 pm

    Muy buen post, justo lo que estaba buscando.
    Muy buen blog tambien.
    Saludos.

    Responder
  • 9. Mortizinho Gome  |  marzo 10, 2010 en 7:56 pm

    “submitiar” ? ese verbo no existe ignorante

    Responder
    • 10. Mortizinho Gome  |  abril 23, 2010 en 8:26 pm

      LOL! XD que cosas!! solo comentar para ofender!.

      Buen Post! es de ayuda ;)

      Responder
  • 11. s  |  agosto 4, 2012 en 4:58 am

    sdf

    Responder
  • 12. raul  |  noviembre 6, 2013 en 5:07 pm

    muy bueno, una duda, como se podra cambiar el funcionamiento de una tecla, por ejemplo, presionar un tab y que lo cambie por barra espaciadora?
    Muy buena la entrada amigo

    Responder

Deja un comentario

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

Trackback this post  |  Subscribe to the comments via RSS Feed



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: