Eventos de teclado con Mootools

Mootools proporciona diversas herramientas y utilidades, adicionales al propio Javascript, para la hora de trabajar con eventos producidos por acciones del usuario. Existe una clase denominada Native Event que tiene toda una serie de utilidades e información de cada evento producido en la página.

Para definir un evento con Mootools tenemos que crear una función que recibe un objeto de la clase Native Event y a través de él podremos obtener diversos datos sobre el evento producido, además de invocar algún que otro método interesante para marcar el comportamiento del evento. Todo esto ya lo explicamos en un artículo anterior, titulado Native Event en Mootools

En este artículo queremos mostrar cómo definir eventos de teclado y de paso cómo, a través del objeto Native Event, podemos saber qué teclas se pulsaron cuando se desató el evento. Para ello veremos un par de ejemplos sencillos con Mootools.

Evento keydown sobre un campo de texto

En realidad todos los elementos de la página aceptan eventos de teclado, pero será más intuitivo comenzar por definir un evento cuando se escribe sobre un campo de texto. Para ello utilizaremos keydown, que se desata cuando el usuario aprieta una tecla. En este ejemplo escribiremos en un lugar de la página el valor del atributo "key" del objeto Native Event que recibimos al codificar la función del evento.

Necesitaremos un código HTML como el siguiente, que implementa el campo de texto y una capa donde escribiremos cosas como resultado del evento.

<form>
<input type="text" id="campotexto">
</form>
<div id="textoescrito"></div>

<p>
Ahora veamos el código Mootools para hacer cosas cuando el usuario aprieta una tecla del teclado, estando situado el foco de la aplicación en el campo de texto.
<p>

$("campotexto").addEvent('keydown', function(miEvento){
   var teclaPulsada = miEvento.key;
   $("textoescrito").set("html", "Has pulsado: " + teclaPulsada)
});

Con el método addEvent() sobre el elemento con id="campotexto" definimos un comportamiento frente a un evento, enviando como parámetro el nombre del evento (keydown) que queremos codificar y una función para realizar cuando se produce el evento señalado. Como decíamos antes, la función del evento recibe como parámetro un objeto de la clase Native Event, que nos dará datos sobre el evento, como la tecla que se ha pulsado.

En la función, como primer acción, definimos una variable a la que asignamos el valor de la propiedad "key" del Native Event recibido, que nos da una cadena de texto con la tecla pulsada. A continuación escribimos, en el elemento con id "textoescrito", el valor de la tecla pulsada.

Podemos ver el ejemplo en funcionamiento en una página aparte.

Ejemplo 2 de eventos de teclado en Mootools

Ahora vamos a tratar un ejemplo de evento de teclado un poco más elaborado. En esta práctica tendremos una capa que podremos mover con el cursor (las flechas del teclado) a cualquier otra posición en la página. Además, nuestro programa detectará si el usuario tiene pulsada la tecla ALT (Alternativa) o Shift (Mayúsculas). En caso que estén pulsadas la velocidad de movimiento cambiará. Con ALT el movimiento será más rápido y con Shift se hará más lento.

Podemos ver el ejercicio resuelto en una página aparte.

Pues bien, el ejemplo, aunque sea un poco más complejo, no necesita muchos más conocimientos o habilidades para resolverlo que el que hemos visto hace un momento. Todo lo que necesitamos está en el objeto de la clase Native Event, que no sólo nos dice qué teclas se han pulsado, sino que también informa si estaba presionada la tecla de Mayúsculas, Alternativa o Control, por ejemplo.

Recordemos que en el artículo anterior ya informamos sobre todos los posibles datos que nos puede dar el objeto Native Event. No obstante, lo que tenemos que saber para este ejemplo es:

• La propiedad "key" almacena el valor de la tecla pulsada en una cadena. En el caso de que se hayan pulsado las flechas del cursor, esta propiedad almacenará los valores "up", "down", "left" o "right", según la flecha presionada.
• La propiedad "shift" es un boleano, que indica si está pulsada o no esta tecla Mayúsculas.
• La propiedad "alt" es otro boleano, que indica si está pulsada o no la tecla Alternativa.

Con esos datos puedo crear el script, pero antes veamos el código de la capa que queremos mover y los estilos CSS que quiero asignarle.

<div id="capamovil">Esta capa se mueve!!!</div>

#capamovil {
   padding: 30px;
   background-color: #ff8800;
   position: absolute;
   top: 200px;
   left: 200px;
}

Sólo quería mostrar esos estilos para que se viera que la capa tiene el position: absolute, para que se pueda posicionar en cualquier lugar de la página definido por los atributos de CSS Top y Left.

Ahora podemos ver el código Javascript que hace uso de Mootools para la gestión de eventos de teclado.

document.addEvent('keydown', function(miEvento){
   //selecciono el elemento que quiero mover
   var elemento = $("capamovil");
   //guardo la posición TOP actual. Es un estilo CSS, por eso la traigo con getStyle()
   var topActual = elemento.getStyle('top').toInt();
   //guardo la posición LEFT actual
   var leftActual = elemento.getStyle('left').toInt();
   //calculo la velocidad con la que tengo que mover el elemento
   var velocidadMovimiento;
   if (miEvento.shift){
      //al estar pulsado shift, la velocidad será 1
      velocidadMovimiento = 1;
   }else{
       if (miEvento.alt){
          //al estar pulsado alt, la velocidad será 6
         velocidadMovimiento = 6;
      }else{
         //si no está pulsado ni shift ni alt, la velocidad será 3
         velocidadMovimiento = 3;
      }
   }
   //si se pulsó la tecla flecha hacia arriba del cursor
   if(miEvento.key == "up"){
      //cambio el estilo del elemento para que se posicione en otro lugar
      elemento.setStyle("top", topActual - velocidadMovimiento);
   }
   //si se pulsó la tecla down
   if(miEvento.key == "down"){
      elemento.setStyle("top", topActual + velocidadMovimiento);
   }
   //Si se pulsó la tecla left
   if(miEvento.key == "left"){
      elemento.setStyle("left", leftActual - velocidadMovimiento);
   }
   //si se pulsó la tecla right
   if(miEvento.key == "right"){
      elemento.setStyle("left", leftActual + velocidadMovimiento);
   }
});

El código lo hemos comentado para que se pueda entender mejor. Realmente no tiene más complicación, si es que hemos seguido el manual de Mootools hasta este punto y hemos podido entender cómo recuperar las teclas pulsadas con el objeto Native Event.

Nuevamente, dejo el enlace para ver el script en marcha.