Resumen: Entrega nº61 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01161E

 

 

EVENTOS DE TECLADO E INFORMACIÓN RELACIONADA

Los eventos de teclado han resultado históricamente difíciles de trabajar con JavaScript. Algunos especialistas han llamado a esto “el caos de JavaScript en el manejo de eventos de teclado”. Vamos a tratar de ver los aspectos clave relacionados con la gestión de eventos de teclado.

logo javascript

 

Los eventos de teclado presentan especial dificultad debido a que existen diferentes juegos de caracteres, diferentes sistemas operativos, diferentes configuraciones de teclado, teclas especiales, caracteres no visibles, caracteres que se obtienen mediante pulsación de dos teclas y por supuesto diferentes idiomas que tienen caracteres no comunes con otros idiomas.

A pesar de todo, no debería ser difícil determinar qué tecla ha sido pulsada y sin embargo históricamente sí ha sido difícil, lo cual es poco entendible en una época en que la tecnología inunda nuestras vidas. Estas dificultades han provenido principalmente de la falta de acuerdo entre los fabricantes de los distintos navegadores para alcanzar una estandarización adecuada. Hoy día podemos decir que esta falta de estandarización está en vías de resolverse (por fortuna no nos enfrentamos a las incompatibilidades que existían hace tan solo unos pocos años).

Hemos de tener en cuenta que existen tres eventos distintos relacionados con pulsar una tecla. Cuando pulsamos una tecla se producen tres eventos, que enunciados por orden son: keydown, keypress, keyup. Los eventos keydown y keyup podemos traducirlos como “la tecla baja” y “la tecla sube”, mientras que keypress sería “la tecla es pulsada”.

Hay dos tipos de códigos diferentes: los códigos de teclado (que representan la tecla del teclado que ha sido pulsada, tecla física) y los códigos de caracteres (número asociado a cada carácter, según el juego de caracteres Unicode). Tener en cuenta que desde el punto de vista de qué tecla física ha sido pulsada es lo mismo escribir una a que una A, ya que en ambos casos pulsamos la misma tecla en el teclado. En cambio desde el punto de vista del carácter, a es un carácter y A es otro carácter diferente (y cada uno tiene su código numérico diferente).

Para cada evento de teclado las propiedades del objeto Event relacionadas con el teclado pueden tener distinto signficado, por ello hemos de atenernos a unas reglas para poder operar con seguridad. Estas reglas son recomendaciones (nuestras), no se trata de reglas de obligado cumplimiento:

Regla 1: para determinar el carácter resultado de la pulsación de una tecla simple o de una combinación de teclas usaremos el evento keypress (no los eventos keydown ni keyup), determinando la tecla pulsada con la propiedad wich del objeto event.

Regla 2: para determinar si ha sido pulsada una tecla no imprimible (como flecha de cursor, etc.), usaremos el evento keyup, determinando la tecla pulsada con la propiedad keyCode (código de la tecla física).

Regla 3: no intentes controlar todo lo que ocurre con el teclado (porque quizás te vuelvas loco). Controla únicamente aquello que sea necesario y útil.

Tener en cuenta que hay algunas teclas no imprimibles que no generan evento keypress, sino únicamente eventos keydown y keyup. En cambio, algunas teclas no imprimibles sí generan evento keypress.

 

 

RECUPERAR UN CARÁCTER A PARTIR DE SU CÓDIGO NUMÉRICO

Cada carácter tiene un código numérico. Guiándonos por el juego de caracteres Unicode los códigos numéricos son 65 para la letra A (mayúscula), 66 para la letra B, …, 97 para la letra a (minúscula). Teclas especiales como ENTER también tienen asignados códigos numéricos: 13 para ENTER, 37 flecha izquierda del cursor, 38 flecha arriba del cursor, 39 flecha derecha del cursor, 40 flecha abajo del cursor, etc.

Para recuperar el carácter asociado a un código usaremos un método estático del objeto predefinido String, con la siguiente sintaxis:

String.fromCharCode(num1, num2, ..., numN);

 

 

Donde num1, num2, …, numN son los códigos numéricos a convertir. Si escribimos por ejemplo alert(String.fromCharCode(97,98,99)); obtendremos como resultado <<abc>>

 

 

PROPIEDADES Y MÉTODOS DEL OBJETO EVENT RELACIONADOS CON TECLADO

Las propiedades y métodos del objeto Event relacionados con el teclado se resumen en la siguiente tabla. Veremos su aplicación práctica en el código de ejemplo que incluimos posteriormente:

Tipo

Nombre

Descripción aprenderaprogramar.com

Propiedades relacionadas con el teclado

altKey

Contiene el valor booleano true si la tecla ALT estaba pulsada cuando se produjo el evento, o false en caso contrario.

ctrlKey

Contiene el valor booleano true si la tecla CTRL estaba pulsada cuando se produjo el evento, o false en caso contrario.

shiftKey

Contiene el valor booleano true si la tecla SHIFT estaba pulsada cuando se produjo el evento, o false en caso contrario.

charCode

Devuelve el código del carácter unicode generado por el evento keypress. Se recomienda usar wich en lugar de charCode.

keyCode

Devuelve el código de tecla pulsada para eventos keydown y keyup

wich

Devuelve el código del carácter unicode generado por el evento keypress.

Otras propiedades

data, metakey

Otras propiedades no estandarizadas

altLeft, ctrlLeft, shiftLeft, isChar

 

 

EJEMPLO: TRABAJANDO CON EVENTOS DE TECLADO

Escribe el siguiente código y comprueba sus resultados:

<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

var eventoControlado = false;

window.onload = function() { document.onkeypress = mostrarInformacionCaracter;

document.onkeyup = mostrarInformacionTecla; }

function mostrarInformacionCaracter(evObject) {

                var msg = ''; var elCaracter = String.fromCharCode(evObject.which);

                if (evObject.which!=0 && evObject.which!=13) {

                msg = 'Tecla pulsada: ' + elCaracter;

                control.innerHTML += msg + '-----------------------------<br/>'; }

                else { msg = 'Pulsada tecla especial';

                control.innerHTML += msg + '-----------------------------<br/>';}

                eventoControlado=true;

}

function mostrarInformacionTecla(evObject) {

                var msg = ''; var teclaPulsada = evObject.keyCode;

                if (teclaPulsada == 20) { msg = 'Pulsado caps lock (act/des mayúsculas)';}

                else if (teclaPulsada == 16) { msg = 'Pulsado shift';}

                else if (eventoControlado == false) { msg = 'Pulsada tecla especial';}

                if (msg) {control.innerHTML += msg + '-----------------------------<br/>';}

                eventoControlado = false;

}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo JavaScript: pulse una tecla</h3></div>

<div id="control"> </div>

</body></html>

 

 

El resultado esperado es que al pulsar una tecla como a ó b se muestre por pantalla Tecla pulsada: a----------------------------- Tecla pulsada: b-----------------------------, o que al pulsar shift se muestre Pulsado shift-----------------------------, o Pulsada tecla especial para otras teclas especiales.

Ten en cuenta lo siguiente:

Se controla si el evento ha sido detectado con keypress mediante la variable booleana eventoControlado. Si el evento ha sido detectado con keypress, no lo tratamos con keyup (evento que tiene lugar después de keypress). De esta forma tratamos de distinguir, de forma aproximada, entre teclas especiales y normales.

Podrían existir algunas divergencias entre diferentes navegadores o diferentes computadores (diferentes teclados).

Este código trata de ser un ejemplo de cómo trabajar con eventos de teclado, pero puedes crear tus propios trucos para trabajar con el teclado, o usar trucos o bibliotecas creadas por otros programadores que están disponibles en internet.

 

 

EJERCICIO 1

Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una tecla>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Utiliza el evento keypress para determinar el carácter que el usuario ha escrito utilizando el teclado y haz que se muestre dentro del div con un tamaño de fuente de 250px.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

EJERCICIO 2

Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Utiliza el evento keypress para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.


 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: