Eventi JavaScript keydown e keyup

Introduzione agli eventi tastiera in JavaScript

Gli eventi tastiera di JavaScript permettono alla tua pagina di reagire nel momento in cui un utente preme o rilascia un tasto. Sono il fondamento degli input di ricerca in tempo reale, delle scorciatoie da tastiera, dei controlli di gioco e della navigazione accessibile. Questo capitolo si concentra sui due eventi più utilizzati — keydown e keyup — ne spiega le differenze, illustra l'oggetto KeyboardEvent che ogni gestore riceve e conclude con esempi pratici ed eseguibili.

Se sei nuovo alla gestione degli eventi in generale, inizia prima con Introduzione agli eventi del browser e Gestione degli eventi nel DOM.

keydown vs. keyup a colpo d'occhio

Entrambi gli eventi si attivano sull'elemento che ha il focus in quel momento (o su document se nessun elemento specifico è focalizzato). La differenza sta nel momento del ciclo di vita del tasto in cui si attivano:

Evento	Si attiva quando…	Si ripete tenendo premuto?	Utilizzo tipico
`keydown`	Un tasto viene premuto	Sì — ripetutamente	Scorciatoie, movimento in gioco, blocco dell'input
`keyup`	Un tasto viene rilasciato	No — una volta per pressione	Rilevare la fine di una pressione, aggiornare l'interfaccia

Una singola pressione di un tasto produce un keydown seguito da un keyup. Tenere premuto un tasto attiva keydown ripetutamente (è possibile rilevare queste ripetizioni automatiche con event.repeat), ma keyup si attiva solo una volta, quando si rilascia il tasto.

L'evento legacy keypress è deprecato e non deve essere utilizzato in nuovo codice. Per reagire al testo digitato da un utente, ascolta invece l'evento input.

Capire keydown e keyup

L'evento keydown

L'evento keydown si verifica quando un utente preme un tasto sulla tastiera. Si attiva prima che il carattere venga inserito in un campo, ed è esattamente per questo che è il posto giusto per chiamare event.preventDefault() quando si vuole bloccare l'input. Questo evento è utile ogni volta che conta il momento della pressione — nei giochi, nelle funzionalità di accessibilità o nei controlli interattivi.

Esempio di evento keydown

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keydown Event</title>
<style>
  .highlight { background-color: yellow; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const inputField = document.getElementById('inputField');
  inputField.addEventListener('keydown', function(event) {
    console.log('Key down:', event.key);
    if (event.key === "Enter") {
      this.classList.add('highlight');
      event.preventDefault(); // Prevents the default action of the enter key
    }
  });
});
</script>
</head>
<body>
<input type="text" id="inputField" placeholder="Press 'Enter' to highlight" />
</body>
</html>

Provalo tu stesso »

Il codice ascolta un evento keydown sul campo di input e controlla se il tasto premuto è "Enter". In tal caso, cambia il colore di sfondo del campo di input in giallo (classe highlight) e impedisce l'invio del modulo o altre azioni tipicamente associate al tasto Invio.

L'evento keyup

L'evento keyup si attiva quando un tasto viene rilasciato, dopo l'evento keydown (nota: l'evento legacy keypress è deprecato e raramente utilizzato nello sviluppo web moderno). Questo evento è adatto ai casi in cui è necessario sapere quando una pressione di tasto è terminata, ad esempio per aggiornare un'interfaccia utente o controllare contenuti multimediali.

Esempio di evento keyup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keyup Event</title>
<style>
  .normal { background-color: transparent; }
  .active { background-color: lightgreen; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const textArea = document.getElementById('textArea');
  textArea.addEventListener('keyup', function(event) {
    console.log('Key up:', event.key);
    if (event.key === "Control") {
      this.classList.remove('active');
      this.classList.add('normal');
    }
  });
  textArea.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      this.classList.add('active');
    }
  });
});
</script>
</head>
<body>
<textarea id="textArea" rows="4" cols="50" placeholder="Press and release 'Control' to see the effect"></textarea>
</body>
</html>

Provalo tu stesso »

Questo codice fa sì che la textarea cambi il suo colore di sfondo in verde chiaro (classe active) quando viene premuto il tasto Control, e lo riporti a trasparente (classe normal) quando il tasto Control viene rilasciato.

L'oggetto KeyboardEvent

Ogni gestore di keydown e keyup riceve un KeyboardEvent. Conoscere le sue proprietà principali è ciò che permette di scrivere una logica tastiera affidabile.

key vs. code

Queste due proprietà sono facili da confondere, e scegliere quella sbagliata è la fonte più comune di bug legati alla tastiera:

event.key — il carattere o il valore nominale prodotto, tenendo conto del layout della tastiera e dei modificatori. Premendo il tasto A si ottiene "a", oppure "A" se si tiene premuto Shift. Nomi dei tasti: "Enter", "Escape", "ArrowLeft", " " (spazio).
event.code — il tasto fisico sulla tastiera, indipendente dal layout o dai modificatori. Lo stesso tasto fisico è sempre "KeyA", che l'utente digiti a, A, o utilizzi un layout non-QWERTY.

Usa key quando ti interessa il carattere (input di testo, scorciatoie esplicite per l'utente). Usa code quando ti interessa la posizione — ad esempio i controlli di gioco WASD che devono funzionare indipendentemente dal layout.

document.addEventListener('keydown', function (event) {
  console.log(event.key, event.code);
});
// Pressing Shift+A on QWERTY logs: "A" "KeyA"
// Pressing the space bar logs:     " " "Space"

Tasti modificatori e repeat

L'evento riporta anche quali tasti modificatori sono premuti e se la pressione è una ripetizione automatica del sistema operativo:

event.altKey, event.ctrlKey, event.shiftKey, event.metaKey — boolean, true mentre quel modificatore è tenuto premuto. (metaKey è Cmd su macOS, il tasto Windows altrove.)
event.repeat — true quando un tasto tenuto premuto attiva di nuovo keydown automaticamente. Verificarlo per ignorare le ripetizioni automatiche.

document.addEventListener('keydown', function (event) {
  // Cross-platform "save" shortcut, ignoring auto-repeat.
  if ((event.ctrlKey || event.metaKey) && event.key === 's' && !event.repeat) {
    event.preventDefault();
    console.log('Save triggered');
  }
});

Leggere i flag dei modificatori direttamente (come sopra) è più robusto che tracciare una variabile separata ctrlPressed, perché i flag sono garantiti essere sincronizzati con la realtà anche se si perde un keyup.

Usi avanzati degli eventi tastiera in JavaScript

Sfruttare la potenza degli eventi tastiera come keydown e keyup può trasformare le normali applicazioni web in piattaforme altamente interattive, accessibili ed efficienti. Di seguito estendiamo i loro utilizzi incorporandoli in scenari più complessi come hotkey personalizzate, controlli di gioco e funzionalità di accessibilità.

Implementare hotkey personalizzate

Le hotkey personalizzate consentono agli utenti di eseguire azioni rapidamente, migliorando la produttività e l'esperienza utente. Questo esempio mostra come creare una semplice hotkey personalizzata (Ctrl + S) per simulare un'azione di salvataggio, che potrebbe essere adattata per attivare funzionalità specifiche nelle applicazioni reali.

Esempio di hotkey personalizzate

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Hotkeys Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  let ctrlPressed = false;
  document.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      ctrlPressed = true;
    }
    // Use toLowerCase() for case-insensitive matching
    if (event.key.toLowerCase() === "s" && ctrlPressed) {
      alert('Saving your progress!');
      event.preventDefault(); // Prevent default to stop other actions like browser shortcuts
    }
  });

  document.addEventListener('keyup', function(event) {
    if (event.key === "Control") {
      ctrlPressed = false;
    }
  });
});
</script>
</head>
<body>
<p>Press <strong>Ctrl + S</strong> to simulate a save action.</p>
</body>
</html>

Provalo tu stesso »

Gestione dei controlli di gioco

I controlli di gioco sono fondamentali per i giochi basati su browser. Questo esempio fornisce una semplice implementazione dei controlli con i tasti freccia per spostare un oggetto giocatore all'interno di un'area di gioco, offrendo un framework di base che può essere espanso in meccaniche di gioco più complesse.

Esempio di controlli di gioco

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Game Control Example</title>
<style>
  #gameArea {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }
  #player {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 125px;
    left: 125px;
  }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const player = document.getElementById('player');
  // Note: offsetLeft/Top don't account for container padding or scroll offsets.
  // For production, consider using getBoundingClientRect() or adding padding offsets.
  let posX = player.offsetLeft;
  let posY = player.offsetTop;
  document.addEventListener('keydown', function(event) {
    switch (event.key) {
      case "ArrowUp":
        posY -= 10;
        break;
      case "ArrowDown":
        posY += 10;
        break;
      case "ArrowLeft":
        posX -= 10;
        break;
      case "ArrowRight":
        posX += 10;
        break;
    }
    player.style.left = posX + 'px';
    player.style.top = posY + 'px';
  });
});
</script>
</head>
<body>
<div id="gameArea">
  <div id="player"></div>
</div>
<p>Use arrow keys to move the red square within the game area.</p>
</body>
</html>

Provalo tu stesso »

Miglioramento dell'accessibilità

I miglioramenti all'accessibilità aiutano a rendere le applicazioni web utilizzabili da persone con disabilità. Questo esempio si concentra sull'uso degli eventi keydown per navigare tra i link tramite i tasti freccia della tastiera, facilitando la navigazione da tastiera per gli utenti che non possono utilizzare un mouse.

Esempio di miglioramento dell'accessibilità

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accessibility Navigation Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a');
  let currentFocus = 0;
  links[currentFocus].focus();
  document.addEventListener('keydown', function(event) {
    if (event.key === "ArrowDown") {
      currentFocus = (currentFocus + 1) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
    if (event.key === "ArrowUp") {
      currentFocus = (currentFocus - 1 + links.length) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
  });
});
</script>
</head>
<body>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>
<p>Use the Up and Down arrow keys to navigate between the links.</p>
</body>
</html>

Provalo tu stesso »

Questi esempi non solo illustrano l'implementazione tecnica degli eventi keydown e keyup, ma dimostrano anche le loro applicazioni pratiche nel migliorare l'interattività e l'accessibilità delle applicazioni web. Incorporando queste funzionalità avanzate, gli sviluppatori possono creare esperienze utente più coinvolgenti e inclusive.

Conclusione

Gli eventi tastiera come keydown e keyup sono indispensabili per creare applicazioni web dinamiche e interattive. Ricorda i punti essenziali: keydown si attiva (e si ripete) alla pressione, keyup si attiva una volta al rilascio, event.key fornisce il carattere mentre event.code fornisce il tasto fisico, e i flag dei modificatori insieme a event.repeat permettono di costruire scorciatoie robuste. Gli esempi precedenti sono un punto di partenza per aggiungere l'interazione da tastiera ai propri progetti.

Capitoli correlati

Introduzione agli eventi del browser — come funzionano gli eventi ad alto livello.
Gestione degli eventi nel DOM — addEventListener, gestori e rimozione.
Eventi: change, input, cut, copy, paste — reagire al testo che arriva effettivamente in un campo.
Focus: focus e blur — si abbina naturalmente alla navigazione da tastiera.
Bubbling e Capturing — come gli eventi tastiera si propagano nel DOM.

Esercitazione

Pratica

Quali eventi usa JavaScript per rilevare l'input da tastiera?

keydownkeyupkeypresskeyclick