You are here
JavaScript manejo del MOUSE y TECLADO Sin categoría 

JavaScript manejo del MOUSE y TECLADO

JavaScript manejo del MOUSE y TECLADO

 

En este grupo se pueden incluir los siguientes eventos:

 

onMouseOver: activado cuando el ratón se mueve por encima de un objeto;

 

onMouseOut: activado cuando el ratón sale de un objeto;

 

onMouseMove: se mueve el cursor del ratón, pero dado que esto sucede a menudo (el uso del ratón es frecuente), no está disponible como opción por defecto, sino tan sólo unida a la captura de eventos, que se explicará a continuación.

 

Los eventos onMouseOver y onMouseOut son complementarios ya que el primero se activa en el momento en que el cursor se coloca en el área del objeto cuya marca contiene el evento, mientras que el segundo lo hace cuando sale.

 

Los eventos onMouseOver y onMouseOut adquieren de la versión 1.0 a la 1.1 de Javascript la capacidad de estar asociados a la marca AREA, por lo que puede operar también con  los  mapas clicables;  para Netscape,  sin  embargo,  debe estar asociado también a la marca HREF, es decir, a un enlace, aunque ficticio.

 

MARCAS SENSIBILES

 

Otro límite es el impuesto a Netscape y las viejas versiones de Explorer por las marcas a las que el evento puede ser asociado:

 

 

ROLLOVER

 

De enorme importancia es el evento onMouseOver combinado con onMouseOut para crear el efecto RollOver.

 

La sintaxis es muy sencilla:

 

<A HREF=”#” onmouseover=”document.images[num].src='imagen.gif'” onmouseout=document.images[num].src='imagen1.gif'”>

 

donde la almohadilla sustituye a cualquier otro enlace, mientras que num es el número de índice de la imagen en la página HTML.

 

 

Hace algunos años, cuando no existían programas como Flash, el rollover era el efecto gráfico de mayor difusión y seguramente el más apropiado para convertir en dinámico un sitio y animar elementos estáticos como los menús y las barras de navegación.

 

Como ejemplo, inserto un rollover algo complejo, el que puede activarse con un mapa clicable. Hay que destacar que para funcionar en Netscape hace falta añadir en cualquier caso un enlace al área sensible, resaltada en rojo (incluso si ha sido sustituido por el signo almohadilla), mientras que en Explorer se puede omitir.

 

<area                                        shape=”rect”                                        coords=”2,2,59,26″ onmouseover=”document.images[num].src='images/tre.gif'” href=”#”>

 

EVENTOS DEL TECLADO

 

En este grupo se pueden incluir los siguientes eventos:

 

  1. onKeyPress: evento que se activa cuando un usuario pulsa y deja de pulsar una tecla o también cuando la mantiene pulsada;
  2. onKeyDown: activado cuando se pulsa la tecla;
  3. onKeyUp: activado cuando una tecla, que se había pulsado, deja de pulsarse;
  4. onHelp: activado cuando se pulsa la tecla F1;

 

El último evento se ha insertado en este sector aun cuando se activa sólo mediante la tecla F1.

 

Cada tecla tiene asignado un número en javascript, algunos de estos son:

 

 

 

Tecla Código Tecla Código Tecla Código
backspace 8 tab 9 enter 13
shift 16 ctrl 17 alt 18
pause/break 19 caps lock 20 escape 27
page up 33 page down 34 end 35
home 36 left arrow 37 up arrow 38
right arrow 39 down arrow 40 insert 45
delete 46 0 48 1 49
2 50 3 51 4 52
5 53 6 54 7 55
8 56 9 57 a 65
b 66 c 67 d 68
e 69 f 70 g 71
h 72 i 73 j 74

 

 

k 75 l 76 m 77
n 78 o 79 p 80
q 81 r 82 s 83
t 84 u 85 v 86
w 87 x 88 y 89
z 90 left window key 91 right window key 92
select key 93 numpad 0 96 numpad 1 97
numpad 2 98 numpad 3 99 numpad 4 100
numpad 5 101 numpad 6 102 numpad 7 103
numpad 8 104 numpad 9 105 multiply 106
add 107 subtract 109 decimal point 110
divide 111 f1 112 f2 113
f3 114 f4 115 f5 116
f6 117 f7 118 f8 119
f9 120 f10 121 f11 122
f12 123 num lock 144 scroll lock 145
semi-colon 186 equal sign 187 comma 188
dash 189 period 190 forward slash 191
grave accent 192 open bracket 219 back slash 220
close braket 221 single quote 222    

 

 

Ya conociendo los números correspondientes a cada tecla solo nos basta con trabajar con Eventos en JavaScript, por ejemplo si queremos ver que tecla presiono en un input el código seria el siguiente:

 

<input type=”text” onkeydown=”tecla(event);” />

 

y el Javascript

 

<script type=”text/javascript”>

function tecla (e)

{

var evt = e ? e : event;

var key = window.Event ? evt.which : evt.keyCode;

alert (key);

}

</script>

 

 

Podemos hacer un if y dependiendo de la tecla (según su key) realizar alguna acción, como llamar una función por ejemplo o no permitir el ingreso en el input de

 

 

caracteres no permitidos, por ejemplo si queremos que en un input no ingresen letras sino solo números, el código y su función seria algo así:

 

El input:

 

<input type=”text” onkeypress=”return num(event);” /> El Javascript:

<script type=”text/javascript”>

function num(e) {

evt = e ? e : event;

tcl = (window.Event) ? evt.which : evt.keyCode;

if ((tcl < 48 || tcl > 57) && (tcl != 8 && tcl != 0 && tcl != 46))

{

return false;

}

return true;

}

</script>

 


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts