Manejar eventos del teclado con javascript

Escrito por Programador ASP clásico en Código Javascript


En el desarrollo de sistemas web es útil asignarle una acción a una tecla que presione el usuario en el teclado de su computadora. Asignar una acción a una tecla o a una combinación de tecla es de gran ayuda cuando realizamos sistemas, como cuando uso el Word y presiono ctrl+g para guardar mo documento.

Cada tecla tiene asignado un numero en javascript:

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

Si deseamos saber que tecla presiono en un input el usuario, el código del input en html es el siguiente:


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

y el código javascript empleado es:


<script type="text/javascript">  
function tecla (e)  {      
var evt = e ? e : event;
var key = window.Event ? evt.which : evt.keyCode;      
alert (key);
}  
</script>

Función de javascript para permitir solo números:

El código del input:


<input type="text" onkeypress="return num(event);" />

El código 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>

Publicado el 12/11/2012 a las 13:28:24 hrs. | 2905 visitas.

Subir
Web hosting by Somee.com