Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Eventos (IV)

6.4 Eventos del teclado

Acceso a la información.

Veremos en esta página cómo acceder la linformación del evento en los eventos de teclado.

Al igual que en la página anterior, lo primero que debemos hacer para obtener la información sobre el teclado, es acceder al objeto event. Usaremos para ello el mismo código que en la página anterior.

function infoTeclado(elEvento) {
evento = elEvento || window.event;

Una vez hemos accedido al objeto event tenemos que aplicarle las diferentes propiedades que tiene para acceder al teclado. Los eventos del teclado son los más difíciles de manejar, ya que hay que tener en cuenta que a veces son incompatibles entre diferentes navegadores. Tenemos además varios tipos de teclas; las teclas normales (numeros y letras) y las teclas especiales (teclas de función, tabulador, teclas Alt, Shift, etc.).Tenemos también tres tipos de eventos de teclado: (onkeyup, onkeypress y onkeydown). También hay que tener en cuenta que la misma propiedad da diferentes resultados para la misma tecla dependiendo del evento al que se ha llamado.

Para mayor dificultad, no todos los teclados son iguales: aunque la mayoría son de un modelo estándar, ni utilizan la misma información, puede haber diferencias entre distintos idiomas, o distintas configuraciones.

Cuando un usuario pulsa una tecla se producen los tres eventos anteriores en el siguiente orden:

• onkeydown: Corresponde al hecho de pulsar una tecla y no soltarla.
• onkeypress: Corresponde a la propia pulsación de la tecla.
• onkeyup: Corresponde al hecho de soltar una tecla que estaba pulsada.

Propiedades del objeto evento para teclado.

las propiedades que aplicaremos a los diferentes eventos para obtener la información del teclado son keyCode y charCode. Estas propiedades son admitidas por los tres eventos del teclado, pero la información que dan cada uno de los eventos es distinta; además el evento keypress da distinta información según el navegador sea del tipo Internet Explorer o del tipo Mozilla-Firefox.

Los datos obtenidos pueden ser:

• El código interno: Es un código que identifica a la tecla en sí, cada tecla tiene un número independientemente de si con ella se pueden escribir uno, dos o tres caracteres.
• Código del carácter: Cada carácter asociado a una tecla tiene un código, una tecla puede tener uno dos o tres, códigos asociados, dependiendo de si se pulsa normalmente, en mayúsculas o con la tecla AlrGr.

Para saber cual es el carácter pulsado se utiliza la función String.fromCharCode(), que convierte el código de carácter a una cadena de texto que contiene el caracter pulsado.

A continuación se muestra cual es la información de estas propiedades con los diferentes eventos del teclado:

Eventos keydown y keyup: en todos los navegadores:

• keyCode: Código interno de la tecla
• charCode: no Definido

Evento keypress: en Internet Explorer:

• keyCode: Código del carácter de la tecla
• charCode: no Definido

Evento keypress: en resto de navegadores:

• keyCode: En teclas normales, no definido. En teclas especiales, código interno de la tecla.
• charCode: En teclas normales, código de carácter, en teclas especiales, 0 .

Como en el resto de propiedades, éstas también debemos pasarlas al objeto event mediante la forma evento.propiedad:

codigo = evento.keyCode

Página de ejemplo de información del teclado.

La siguiente página de ejemplo muestra la información que se obtiene con los distintos eventos de teclado al pulsar las teclas. Este es su código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Información del teclado</title> 
<style type="text/css">
   p { padding: 0.3em 1em; font-family: arial; }
   #caja2 { width: 250px;float: left; border: 1px solid black; margin:20px; }
</style>
<script type="text/javascript">
function info(elEvento) {
         var texto = document.getElementById("caja") //acceso al sitio de escritura
         var evento = elEvento || window.event // definir objeto event
         if (evento.type ==  "keydown" ) {texto.innerHTML = ""} //borrar texto anterior
         tipo = "<div id='caja2'><p>Tipo de evento: " + evento.type + "</p>" //define tipo de evento
         propkeyCode = "<p>Propiedad keyCode " + evento.keyCode +  "</p>"  //info propiedad keyCode
         propcharCode = "<p>Propiedad charCode " + evento.charCode + "</p>" //info propiedad charCode
         if (evento.type ==  "keypress" ) { //el número de caracter sólo está en el evento keypress
             caracter = "<p>Caracter pulsado<br/> -Int. Explorer-: " + String.fromCharCode(evento.keyCode) + "</p>";
             caracter2 = "<p>Caracter pulsado<br/> -Resto naveg.-: " + String.fromCharCode(evento.charCode) + "</p>";
             }
         else {
             caracter = ""
             caracter2 = ""
             }
         //escribir el texto del evento, al haber tres eventos el texto se escribirá tres veces.
         texto.innerHTML += tipo + propkeyCode + propcharCode + caracter + caracter2 + "<br/></div>"
         } 
window.onload = function() { //acceso a los eventos.
document.onkeyup = info;
document.onkeypress = info;
document.onkeydown = info;
}
</script>
</head>
<body>
<h1>Información del teclado</h1>
   <p>Pulsa una tecla y te daré la información sobre la misma.</p>
   <div id="caja"><div>
</body>
</html>

Puedes ver como queda esta página en el siguiente enlace:

Información sobre el teclado.

En el siguiente tema veremos cómo trabajar con formularios

Formularios.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com