Manejando eventos del teclado con Javascript

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 Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo

About these ads