Los eventos producidos por el teclado son una de las herramientas más potentes que tiene el diseñador de páginas web a su disposición. Tiene control sobre casi todas las teclas que se pulsan o se dejan de pulsar.

NOTA: Netscape no incluye la posibilidad de capturar eventos generados por el teclado en las versiones Unix de Communicator 4.0.

Para capturar eventos del teclado, lo primero que hay que hacer es "decirle" al navegador que queremos capturar esos eventos:

	document.onkeydown = TeclaPulsada

Cuando el navegador ejecute esta línea, sabrá que siempre que se pulse una tecla, deberá llamar a la función TeclaPulsada (El nombre de la función es el que el programador quiera).

Ahora la pregunta es la siguiente: ¿cómo sabemos la tecla que se ha pulsado? Pues la respuesta depende, depende del navegador que estemos utilizando.

En caso del Netscape

En el Netscape es algo más complicado todo lo relacionado con el manejo de eventos. Debemos colocar una línea extra para decirle al Netscape que siempre esté atento por el evento de pulsar una tecla. Si no lo hacemos, habrá problemas con otros eventos, como cuando se pulsa un botón del ratón.

	document.onkeydown = TeclaPulsada
	if (ns4)
	    document.captureEvents(Event.KEYDOWN)

Nuestra función TeclaPulsada recibe un parámetro oculto. Llamaremos a este parámetro tecla. Con esto, la declaración de la función queda como sigue:

	function TeclaPulsada (tecla)

tecla representa la tecla que se ha pulsado. Para conocer cuál ha sido, debemos utilizar la propiedad which:

	tecla.which

Esto nos devuelve el número que corresponde a la tecla pulsada. Por tanto, para convertir este número al caracter correspondiente utilizamos:

	String.fromCharCode (tecla.which)

Pues bien, si colocamos ahora todo junto, ya tenemos nuestra función TeclaPulsada definida (al final de la función, he colocado una línea que lo único que hace es mostrar una ventana que muestra el código y la tecla en sí):

	function TeclaPulsada (tecla) 
	{
	    var teclaCodigo = tecla.which
	    var teclaReal   = String.fromCharCode (teclaCodigo)
	    alert("Código de la tecla: " + teclaCodigo + "nTecla pulsada: " + teclaReal)
	}

Ejemplo (Sólo Netscape)

En caso del Explorer

En este caso, el proceso es bastante parecido. Para empezar, la función TeclaPulsada no recibe el parámetro tecla. Por tanto, en lugar de usar tecla.which para conocer la tecla, usamos event.keyCode.

Para la conversión a la tecla real, volvemos a usar la misma función, porque ya tenemos el código de la tecla, y eso es lo que recibe String.fromCharCode.

La función TeclaPulsada queda ahora:

	function TeclaPulsada ()
	{
	    var teclaCodigo = event.keyCode
	    var teclaReal   = String.fromCharCode (teclaCodigo)
	    alert("Código de la tecla: " + teclaCodigo + "nTecla pulsada: " + teclaReal)
	}

Ejemplo (Sólo Explorer)

Combinando Ambos

Por supuesto, lo que queremos es utilizar el ejemplo anterior tanto en el Netscape como en el Explorer. Si nos fijamos bien, la diferencia primordial está en la asignació de teclaCodigo. Por eso, lo que debemos hacer es ejecutar esta línea en un if, para distinguir el navegador que estemos usando. Veamos el código:

	var teclaCodigo
	var teclaReal

	document.onkeydown = TeclaPulsada
	if (ns4) 
	    document.captureEvents(Event.KEYDOWN)

	function TeclaPulsada (tecla)
	{
	    if (ns4)	    
		teclaCodigo = tecla.which
	    else
		if (ie4)
	            teclaCodigo = event.keyCode

	    teclaReal = String.fromCharCode (teclaCodigo)
	    alert("Código de la tecla: " + teclaCodigo + "nTecla pulsada: " + teclaReal)
	}

Ejemplo

Animando Elementos con el Teclado

Vayamos ahora con lo que más nos interesa. Al igual que movimos anteriormente la bandera utilizando el ratón, haremos ahora lo mismo pero usando el teclado. Pero vayamos por partes, en primer lugar, veremos cómo iniciar el movimiento de la bandera.

El funcionamiento de lo que queremos es bien sencillo: pulsamos una tecla, y la bandera se moverá indefinidamente. Para esto, debemos elegir una tecla, por ejemplo la m de mover. Una vez elegida la tecla, tenemos que conocer cuál es su código numérico, y aquí es donde aparece otro inconveniente, porque los códigos de las teclas son diferentes en ambos navegadores. Pues bien, para conocer los códigos de la m, podemos usar el tercer ejemplo de esta misma sección, tanto en el Netscape como en el Explorer.

Ya adelanto que el código para el Explorer es 77, y para el Netscape es 109. Ahora, cada vez que se pulse una tecla, comparamos los códigos para ver si iniciamos el movimiento de la bandera.

Aquí está el código:

	function Inicio() 
	{
	    if (ns4) 
	    	bandera = document.divBandera
	    else
		if (ie4)
		    bandera = divBandera.style

	    document.onkeydown = TeclaPulsada
	    if (ns4) 
		document.captureEvents(Event.KEYDOWN)
	}

	function TeclaPulsada (tecla)
	{
	    if (ns4)
	    {
		teclaCodigo = tecla.which
		if (teclaCodigo == 109)
		    Animar()
	    }
	    else
		if (ie4)
		{         
		    teclaCodigo = event.keyCode
		    if (teclaCodigo == 77)
		        Animar()
		}
	}

	function Animar() 
	{
	    bandera.left = parseInt (bandera.left) + 3
	    setTimeout("Animar()",30)
	}

Ejemplo

Este ejemplo es correcto, aunque tiene dos limitaciones que vamos a corregir rápidamente: en primer lugar, lo que más salta a la vista es que la bandera jamás se detiene, todo lo contrario; y en segundo lugar, si pulsamos varias veces la m, la bandera cada vez se mueve más y más rápido.

Corrección 1

Para conseguir que la bandera se detenga cuando soltemos la tecla, esto es, que sólo se mueva mientras estemos pulsando la m, necesitamos otro evento, el keyUp. Este evento se lanza cada vez que soltemos una tecla y, al igual que el keyDown, necesitamos inicializarlo. Ahora, toda esta inicialización queda de la siguiente manera:

	document.onkeydown = TeclaPulsada
	document.onkeyup = TeclaSoltada
	if (ns4)
	    document.captureEvents (Event.KEYDOWN | Event.KEYUP)

TeclaSoltada es la función que se llamará cada vez que se deje de pulsar un tecla.

Como ya hemos hecho antes, el código dentro de Animar lo introduciremos en un if, de forma que sólo se ejecute si una variable activa vale verdadero.

	function Animar() 
	{
	    if (activa)
	    {
		bandera.left = parseInt (bandera.left) + 3
	    	setTimeout("Animar()",30)
	    }
	}

Esta variable la colocaremos a verdadero desde que se pulse la m y, cuando el usuario la suelte, la colocaremos a falso

Veamos primero cómo ponemos a verdadero la variable activa:

	function TeclaPulsada (tecla)
	{
	    if (ns4)
	    {
		teclaCodigo = tecla.which
		if (teclaCodigo == 109)
		{
		    activa = true
		    Animar()
		}
	    }
	    else
		if (ie4)
		{         
		    teclaCodigo = event.keyCode
		    if (teclaCodigo == 77)
		    {
		        activa = true
		        Animar()
		    }
		}
	}

Y ahora cómo la ponemos a falso:

	function TeclaSoltada (tecla)
	{
	    if (ns4)
	    {
		teclaCodigo = tecla.which
		if (teclaCodigo == 109)
		    activa = false
	    }
	    else
		if (ie4)
		{         
		    teclaCodigo = event.keyCode
		    if (teclaCodigo == 77)
		        activa = false
		}
	}

Ahora, la bandera ya sólo se mueve mientras estamos pulsando la m, porque es cuando la variable activa permanece a verdadero.

Ejemplo

Corrección 2: Lo último que nos queda ahora es conseguir que la bandera no aumente su velocidad, en este caso, al dejar pulsada la tecla. Es muy simple, lo que tenemos que hacer es añadir un if en la función TeclaPulsada, de manera que sólo se llame a Animar si la bandera aún no se está moviendo (es decir, si la variable activa vale falso). Veamos la nueva función:

	function TeclaPulsada (tecla)
	{
	    if (ns4)
	    {
		teclaCodigo = tecla.which
		if ( (teclaCodigo == 109) && !activa)
		{
		    activa = true
		    Animar()
		}
	    }
	    else
		if (ie4)
		{         
		    teclaCodigo = event.keyCode
		    if ( (teclaCodigo == 77) && !activa)
		    {
		        activa = true
		        Animar()
		    }
		}
	}

Ejemplo

- Versión imprimible de este documento
- Enviar por e-mail este documento