Keycode Checker

Keycode Checker è uno strumento per sviluppatori che ti consente di verificare istantaneamente come i tasti della tastiera premuti nel browser vengono riconosciuti come dati degli eventi in JavaScript.

Nello sviluppo frontend, è necessario un rilevamento accurato dei tasti quando si implementano tasti di scelta rapida o controlli di gioco in base all'input dell'utente. Con questo strumento, puoi ottenere le proprietà della chiave come event.key, event.code e event.keyCode in un colpo d'occhio e copiarle con un solo clic. È anche facile testare il comportamento di diversi layout di tastiera (come JIS rispetto a US) e le combinazioni con tasti modificatori come Maiusc e Ctrl.

Puoi anche controllare la cronologia degli input della tastiera e testare in modo sicuro la soppressione delle azioni predefinite del browser (come il movimento del Tab o lo scorrimento dello Spazio) all'interno del browser quando è abilitato e.preventDefault().

event.key

Rappresenta il carattere o la funzione effettivamente inserito dall'utente. Ad esempio, premendo Maiusc + 1 su una tastiera americana si ottiene ! come event.key. È la proprietà più consigliata per valutare l'input logico.

event.code

Indica la posizione fisica del tasto premuto. Indipendentemente dal layout della lingua della tastiera, premendo il tasto nella posizione "A" restituirà sempre KeyA. Questo è molto utile per azioni dipendenti dal layout fisico, come il movimento WASD nei giochi.

event.keyCode / event.which

Restituisce un codice numerico specifico del sistema assegnato al tasto premuto (es. 65 per A). Sebbene a lungo utilizzati nello sviluppo JavaScript, questi sono ora deprecati. Dovrebbero essere usati solo per controlli di retrocompatibilità.

event.location

Un numero che indica la regione fisica della tastiera in cui è stato premuto il tasto. Può distinguere tra tasti standard (0), modificatori sinistri (1), modificatori destri (2) e tasti del tastierino numerico (3).

preventDefault()

Un metodo JavaScript utilizzato per annullare il comportamento predefinito del browser innescato da un evento, come lo scorrimento della pagina verso il basso quando si preme il tasto Spazio.

D.Posso usarlo su smartphone o tablet?

Funziona correttamente se hai una tastiera fisica collegata. Tuttavia, con una tastiera software su schermo, l’evento keydown potrebbe non attivarsi correttamente a seconda dell’implementazione del sistema operativo o del browser, oppure potrebbe restituire sempre lo stesso keycode (es. 229). Questo strumento è destinato all’uso con tastiere fisiche.

D.Dovrei usare event.key o event.code?

Dipende dal tuo caso d’uso. Se vuoi valutare il significato del tasto o del carattere inserito (es. 'Premi Invio per inviare'), usa event.key. D’altra parte, se vuoi basare le azioni sulla posizione fisica sulla tastiera (es. 'Muovi il personaggio con W, A, S, D'), usare event.code è la pratica migliore.

D.Posso impedire scorciatoie come F5 o Ctrl+W?

Anche se usi e.preventDefault() di JavaScript, potresti non essere in grado di impedire completamente potenti tasti di scelta rapida riservati a livello di sicurezza o di sistema operativo/browser, come la chiusura di schede, il ricaricamento di finestre o l’apertura di strumenti per sviluppatori del browser.

D.Perché event.keyCode è deprecato?

Perché il valore numerico restituito può variare a seconda del browser, del sistema operativo e del layout della tastiera, causando problemi di compatibilità. Attualmente si consiglia di utilizzare event.key o event.code.

D.I dati dei tasti inseriti vengono inviati a un server?

No, non vengono inviati. Tutta l’elaborazione viene completata utilizzando JavaScript all’interno del browser e la cronologia di input dei tasti non viene mai inviata o salvata su alcun server esterno.

Ecco i tipici scenari di sviluppo in cui è necessario controllare i keycode.