Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 129

Visitas el mes pasado: 191

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF


GRACIAS

Por elegir aprende-web

Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.

By Anyelguti



Eventos (IV)

6.4 Eventos del teclado

javascript

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:


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:

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:

Evento keypress: en Internet Explorer:

Evento keypress: en resto de navegadores:

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.






manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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