Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 129
Visitas el mes pasado: 191
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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. 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:
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 teclacharCode
: no DefinidoEvento keypress
: en Internet Explorer:
keyCode
: Código del carácter de la tecla charCode
: no DefinidoEvento 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
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:
En el siguiente tema veremos cómo trabajar con formularios
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