informaticaPC

Tutorial de JavaScript

Eventos de teclado y ratón en JavaScript


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Detectar la posición del ratón

Si deseamos detectar las coordenadas del ratón respecto al documento, accederemos diréctamente al evento del siguiente modo:

var x, y;

if( navigator.appName == "Microsoft Internet Explorer" )
{
    x = window.event.clientX + document.body.scrollLeft;
    y = window.event.clientY + document.body.scrollTop ;
}
else
{
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop;
}

document.body.innerHTML = "x: [" + x + "] - y: [" + y + "]<br/>";

Descargar ejemplo

Tal y como hemos comentado anteriormente, los eventos en versiones antiguas Internet Explorer se capturaban de forma diferente que en el resto de navegadores web (en el anterior ejemplo mantenemos la compatibilidad con dichas versiones anteriores.)

Detectar la tecla pulsada

Con la propiedad keyCode podemos obtener el código de una tecla.

En el ejemplo que te mostramos a continuación, cada vez que se pulsa una tecla en el cuadro de texto se procesa una función que muestra el código de la tecla pulsada:

<html>

    <head>
        <title>Curso de JavaScript</title>
        <script language="JavaScript">
            function tecla( evento )
            {
                var codigoTecla;

                // Averiguar el navegador web usado:
                if( navigator.appName == "Microsoft Internet Explorer" )
                    codigoTecla = window.event.keyCode;
                else
                    codigoTecla = evento.keyCode;

                // Mostrar el código de la tecla pulsada:
                document.body.innerHTML += "keyCode: " + codigoTecla + "<br />";

                // Devolver el foco al cuadro de texto:
                document.getElementById("text1").focus();
            }
        </script>
    </head>

    <body>
        Escribe algo:
        <input type="text" id="text1" name="text1" onkeyup="tecla(event);" /><br/>
    </body>

</html>

Descargar ejemplo

Una vez más recordarte que las últimas versiones de Internet Explorer permiten acceder a los eventos en sí del mismo modo que en el resto de los navegadores web usados (no siendo necesario detectar el navegador usado), pero mantenemos dicha comprobación por compatibilidad con dichas versiones ya que aún son usadas.

Información

En versiones más antiguas de los navegadores web Firefox y Opera era necesario usar which en lugar de keyCode.

Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso