vagacode

Los eventos relacionados con el teclado son bastante complicados ya que no están estandarizados. De todos modos tenemos que resolverlo de la mejor manera posible y para eso, primero debemos recordar que cuando se pulsa una tecla no se ejecuta un evento sino tres: onkeydown, onkeypress y onkeyup que traduciríamos como, la tecla baja, la tecla queda abajo y la tecla sube.

Saber cuál es la tecla que se ha pulsado tampoco es tan sencillo porque depende de lo que quisiéramos saber, una cosa es la tecla en si misma (d y D son la misma tecla) y otra cosa es saber el código del carácter (d y D no son iguales). Además, como si esto fuera poco, también existen combinaciones de teclas usando Alt Ctrl o cualquier otra sin contar que todo eso lo podemos mezclar con los clicks del ratón.

Para ver las diferencias entre las distintas propiedades vamos a utilizar una etiqueta input con un evento onkeydown:

<input type="text" onkeydown="teclado(event)">

Las primeras propiedades a evaluar son las que nos permiten saber si se han oprimido algunas de las teclas especiales:

altKey devuelve true si se oprime la tecla ALT
ctrlKey devuelve true si se oprime la tecla CTRL
shiftKey devuelve true si se oprime la tecla SHIFT

function teclado(e) {
	if (e.altKey) {
		alert("tecla ALT");
	} else if (e.ctrlKey) {
		alert("tecla CTRL");
	} else if (e.shiftKey) {
		alert("tecla SHIFT");
	} else {
		alert("cualquier otra tecla");
    }
}

Hasta ahí es simple pero si queremos saber qué otra tecla se ha pulsado, hay varias propiedades que podríamos evaluar pero ... por ejemplo, charCode devolverá el código Unicode del carácter sólo en el evento keypress ya que en los otros, el resultado siempre será cero; por el contrario, las propiedades keyCode y which devolverán el código ASCII del carácter en el evento keypress y el código Unicode de la tecla en los eventos keydown y keyup pero su resultado variará según el navegador.

Entonces, ¿queda claro que el tema es confuso? Por suerte, las nuevas versiones van colocando las cosas en su lugar y se recomienda olvidarse de todo ese galimatías y utilizar una propiedad sencilla que debería haber existido siempre: la propiedad key devuelve una cadena de texto con el nombre de la tecla oprimida; así que simplemente empezamos otra vez y resumimos nuestra función:

function teclado(e) {
	alert(e.key);
}

Si pulsamos la tecla a devolverá a y si pulsamos A devolverá A, etc, etc. Además, como todas las teclas especiales tienen su nombre, basta saber cuál es: CapsLock, Enter, Escape, Control, ArrowUp, Home, Shift, Alt, F1, Insert, etc.

Definitivamente, esta es la solución más lógica y deberíamos olvidarnos de cualquier otra pero, de todos modos, cuando usamos los eventos del teclado siempre hay que tener en cuenta que se ejecutan con mucha rapidez y mantener pulsada una tecla puede implicar que se produzcan efectos indeseados.

Una forma de evitar esto es establecer alguna clase de timer que impida que se procese un evento antes de haber transcurrido determinado tiempo:

var keydelay = false; // definimos una variable global

function teclado(event) {
	if(keydelay) {
		// si el flag es true no hacemos nada
		return;
	}
	// esta en false y lo ponemos en true
	keydelay = true;
	// y ejecutamos una demora de 50 mili-segundos antes de ponerlo en false
	setTimeout(function(){keydelay=false}, 50);
	// cuando termina la demora evaluamos el teclado y verificamos las teclas
	alert(event.key);
}