Bienvenidos sean a este post, hoy les traigo algunos eventos que dependiendo el navegador pueden estar habilitados o no, algunas quedaron obsoletas, otras son redundantes o fueron reemplazadas, veamos los casos.
Manejo del teclado
En este caso tendremos tres eventos que podemos manejar:
- onKeyDown, es cuando el usuario presiona la tecla
- onKeyUp, es cuando el usuario libera la tecla
- onKeyPress, es cuando el usuario mantiene presionada la tecla
Como pueden ver tenemos dos eventos que se asemejan bastante y estos son onKeyDown y onKeyPress porque tienen conductas muy similares pero la diferencia esta en que onKeyDown detecta cualquier tecla pero onKeyPress no detecta a SHIFT, CTRL, ALT y de este estilo, por este motivo los mas utilizados son onKeyDown y onKeyUp.
Manejo de la ventana
Este se encargan de monitorear dos eventos en las ventanas:
- onMove, cuando se mueve la ventana
- onResize, cuando se cambia el tamaño de la ventana
Estos tienen su practicidad para monitorear cuando cambiemos el tamaño de nuevas ventanas generadas por nosotros por ejemplo, pasemos a ver un ejemplo para entender estos conceptos:
<html>
<head>
<title>
Pagina de ejemplo de eventos
</title>
<script language="javascript">
<!--
function tamano()
{
document.getElementById("ancho").innerHTML=window.innerWidth;
document.getElementById("alto").innerHTML=window.innerHeight;
}
function tecla(event)
{
var x = event.which || event.keyCode;
alert(String.fromCharCode(x));
}
//-->
</script>
</head>
<body onResize="tamano()">
<input type="text" id="texto" name="texto" value="" onKeyPress ="tecla(event)"><br>
<input type="text" id="texto" name="texto" value="" onKeyUp ="tecla(event)"><br>
El ancho del browser es: <div id="ancho"></div>
El alto del browser es: <div id="alto"></div>
<script language="javascript">
<!--
document.getElementById("ancho").innerHTML=window.innerWidth;
document.getElementById("alto").innerHTML=window.innerHeight;
//-->
</script>
</body>
</html>En este caso tenemos dos elementos de tipo TEXT para poder ingresar un texto y en el primero usaremos a onKeyPress y en el segundo usaremos a onKeyUp, despues tendremos dos DIV donde en el primero mostraremos el ancho del navegador y en el segundo se mostrara la altura del mismo, por ultimo tendremos en el tag BODY el evento onResize que se encargara de monitorear el cambio de tamaño del navegador, veamos el bloque de Javascript del final:
<script language="javascript">
<!--
document.getElementById("ancho").innerHTML=window.innerWidth;
document.getElementById("alto").innerHTML=window.innerHeight;
//-->
</script>En este caso primero obtendremos el elemento ancho al cual no lo asignaremos a ninguna variable sino que simplemente se escribe por medio de innerHTML el valor de ancho interno de la ventana del navegador por medio de innerWidth, la siguiente es exactamente igual pero utiliza a alto y se lo asigna por medio de innerHeight, este se encargara de mostrar los datos en pantalla al cargar la pagina, veamos el otro bloque de Javascript:
<script language="javascript">
<!--
function tamano()
{
document.getElementById("ancho").innerHTML=window.innerWidth;
document.getElementById("alto").innerHTML=window.innerHeight;
}
function tecla(event)
{
var x = event.which || event.keyCode;
alert(String.fromCharCode(x));
}
//-->
</script>En este caso tendremos dos funciones, hablemos de la primera que es tamano, a la cual llamaremos cuando se cambie el tamaño del navegador y se detecte por medio de onresize y le asignaremos al igual que dijimos en el blqoue anterior el tamaño de ancho y alto del navegador a sus tags DIV respectivos, nuestra siguiente funcion se encargara de mostrarnos la tecla que fue presionada, para ello crearemos una variable llamada x donde por medio de event, para el cual usaremos a which o keyCode para obtener el numero de caracter de la tecla, lo hacemos asi para que funcione en todos los navegadores, luego por medio de un alert mostraremos la tecla, para ello usaremos a fromCharCode del objeto String y x sera el valor que informaremos para obtenerlo, grabemos y probemos la pagina donde obtendremos una salida semejante a esta
En este caso podemos ver como al cambiar el tamaño nos lo muestra en tiempo real, para el caso del teclado veamos el siguiente video donde se vera en mejor detalle
En este caso podemos ver como al utilizar onKeyPress podemos diferenciar entre mayusculas y minusculas pero no nos detecta las teclas especiales, en este caso presiono Ctrl y no lo detecta, en cambio con onKeyUp no distingo entre mayusculas y minusculas pero si ven nos mostro un caracter vacio porque presione Ctrl, si bien no nos distingue cuando esta entre mayusculas y minusculas si nos detecta todo el teclado.
En resumen, hoy hemos visto dos eventos especiales que controlan el tamaño del navegador y las teclas presionadas sobre un elemento, hemos visto como aplicarlarlas, para que sirven y un ejemplo donde lo pusimos en practicas, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 