1. Home
  2. JavaScript
  3. Verificare lo stato di un tasto in Javascript

Verificare lo stato di un tasto in Javascript

by -

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