Tramite le funzioni OnKeyUp, OnKeyPress e OnKeyDown possiamo verificare se un tasto viene rispettivamente rilasciato, premuto e rilasciato o tenuto solamente premuto.
Ecco il codice di un tool che utilizza queste funzioni:
<html> <head> <style type="text/css"> .stile { background-color:black; boder-color:#00ff00; color:#00ff00; } </style>
Il codice tra i tag style è codice CSS, esso serve per modificare lo stile della nostra pagina HTML.
</head> <body OnKeyDown="keydown(event);" OnKeyPress="keypress(event);" OnKeyUp="keyup(event);">
Nel tag body richiamiamo le funzioni keydown, keypress e keyup. Esse servono a verificare se l’ utente sta premendo tasti in modo tale da leggerli per poi scriverli nella tabella sottoforma di codice.
<script type="text/javascript"> function keydown(event) { document.getElementById("keyCode_down").innerHTML=event.keyCode; document.getElementById("charCode_down").innerHTML=event.charCode; document.getElementById("which_down").innerHTML=event.which; } function keypress(event) { document.getElementById("keyCode_press").innerHTML=event.keyCode; document.getElementById("charCode_press").innerHTML=event.charCode; document.getElementById("which_press").innerHTML=event.which; } function keyup(event) { document.getElementById("keyCode_up").innerHTML=event.keyCode; document.getElementById("charCode_up").innerHTML=event.charCode; document.getElementById("which_up").innerHTML=event.which; } </script>
Nelle tre funzioni keydown, keypress e keyup vengono ottenuti i valori keyCode, charCode e which dei tasti premuti e inseriti nella tabella.
<table border="1"> <tr> <td>event</td> <td>keycode</td> <td>charCode</td> <td>which</td> </tr> <tr> <td>OnKeyDown</td> <td id="keyCode_down"></td> <td id="charCode_down"></td> <td id="which_down"></td> </tr> <tr> <td>OnKeyPress</td> <td id="keyCode_press"></td> <td id="charCode_press"></td> <td id="which_press"></td> </tr> <tr> <td>OnKeyUp</td> <td id="keyCode_up"></td> <td id="charCode_up"></td> <td id="which_up"></td> </tr> </table> </body> </html>
Tramite questi codici possiamo richiamare delle rispettive funzioni ad esempio come nel gioco Hunting The Invaders che con il tasto “A” viene richiamata la funzione boom()
<body OnKeyUp="if(event.keyCode==65){boom();}">
(In questo caso il keyCode del tasto A è uguale a 65).
Ecco l’ output del codice.
Ti è piaciuto questo articolo? Allora ti piacerà anche:
– Creare un orologio analogico in Javascript usando webkit
– Convertitore binario,decimale ottale e esadecimale in Javascript
– Creare una calcolatrice in Javascript