You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/7-keyboard-events/article.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Prima di scendere nei dettagli della tastiera, è bene ricordare che nei dispositivi moderni esistono tanti modi per "inserire qualche dato". Per esempio, è doveroso citare l'uso del riconoscimento vocale (specialmente sui dispositivi mobile) o il copia/incolla tramite il mouse.
4
4
5
-
Quindi, se vogliamo tenere traccia di qualunque input dentro un campo `<input>`, allora gli eventi della tastiera non saranno sufficienti. Esiste però un altro evento chiamato `input` per tenere traccia delle modifiche degli `<input>`, indipendentemente dalla modalità di inserimento. Questa potrebbe essere la scelta corretta per questo tipo di attività. L'argomento, verrà affrontato più avanti nel capitolo <info:events-change-input>.
5
+
Quindi, se vogliamo tenere traccia di qualunque input dentro un campo `<input>`, allora gli eventi della tastiera non saranno sufficienti. Esiste però un altro evento chiamato `input` per tenere traccia delle modifiche degli `<input>`, indipendentemente dalla modalità di inserimento. Questa potrebbe essere la scelta corretta per questo tipo di attività. L'argomento verrà affrontato più avanti nel capitolo <info:events-change-input>.
6
6
7
7
Gli eventi da tastiera dovrebbero essere usati per gestire, appunto, azioni da tastiera (comprese quelle virtuali). Ad esempio, per reagire ai tasti freccia `key:Up` e `key:Down`, oppure per l'uso delle scorciatoie e/o tasti di scelta rapida (includendo quindi combinazioni di tasti).
8
8
@@ -24,11 +24,11 @@ Proviamo diverse combinazioni di tasti nel campo di testo.
24
24
25
25
## Keydown e keyup
26
26
27
-
L'evento `keydown`viene scaturito alla pressione di un tasto,`keyup`, invece, quando viene rilasciato.
27
+
L'evento `keydown`scaturisce alla pressione di un tasto;`keyup`, invece, quando viene rilasciato.
28
28
29
29
### event.code e event.key
30
30
31
-
La proprietà `key` dell'oggetto evento, permette di ottenere il carattere, mentre la proprietà `code` ci restituisce il "codice fisico del tasto".
31
+
La proprietà `key` dell'oggetto evento permette di ottenere il carattere, mentre la proprietà `code` ci restituisce il "codice fisico del tasto".
32
32
33
33
Ad esempio, a parità di `key:Z`, quest'ultimo potrebbe essere stato premuto con o senza il `key:Shift`, cosa che potrebbe restituirci due differenti caratteri: `z` minuscolo oppure `Z` maiuscolo.
34
34
@@ -40,10 +40,10 @@ Ad esempio, a parità di `key:Z`, quest'ultimo potrebbe essere stato premuto con
40
40
|`key:Shift+Z`|`Z` (maiuscolo) |`KeyZ`|
41
41
42
42
43
-
Prendendo questo tasto come riferimento, se un utente facesse uso di diverse lingue nello stesso sistema operativo, il passaggio ad un'altra lingua, potrebbe portare ad avere tutt'altro carattere rispetto a `"Z"`. Quest'ultimo sarebbe il valore di `event.key`, mentre `event.code` sarebbe sempre `"KeyZ"`.
43
+
Prendendo questo tasto come riferimento, se un utente facesse uso di diverse lingue nello stesso sistema operativo, il passaggio ad un'altra lingua potrebbe portare ad avere tutt'altro carattere rispetto a `"Z"`. Quest'ultimo sarebbe il valore di `event.key`, mentre `event.code` sarebbe sempre `"KeyZ"`.
44
44
45
45
```smart header="\"KeyZ\" e altri codici tasto"
46
-
Ogni tasto ha un codice che dipende dalla sua posizione sulla tastiera. Questi codici, vengono descritti nelle [specifiche dei codici Evento UI](https://www.w3.org/TR/uievents-code/).
46
+
Ogni tasto ha un codice che dipende dalla sua posizione sulla tastiera. Questi codici vengono descritti nelle [specifiche dei codici Evento UI](https://www.w3.org/TR/uievents-code/).
47
47
48
48
Per esempio:
49
49
- I tasti lettera hanno dei codici: `"Key<letter>"`: `"KeyA"`, `"KeyB"` etc.
@@ -52,7 +52,7 @@ Per esempio:
52
52
53
53
Esiste una grande varietà di layout di tastiera, e le specifiche danno un codice per ognuno di essi.
54
54
55
-
Per avere informazioni sui vari codici fare riferimento alla [sezione alfanumerica delle specifiche](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section), oppure, è sufficiente premere un tasto nel [banco di test](#keyboard-test-stand) precedente.
55
+
Per avere informazioni sui vari codici, fare riferimento alla [sezione alfanumerica delle specifiche](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section), oppure, è sufficiente premere un tasto nel [banco di test](#keyboard-test-stand) precedente.
56
56
```
57
57
58
58
```warn header="La distinzione tra maiuscolo e minuscolo è importante: è `\"KeyZ\"`, e non `\"keyZ\"`"
@@ -71,11 +71,11 @@ Cosa succederebbe se un tasto non restituisse nessun carattere? Per esempio, `ke
71
71
72
72
È importante sottolineare che `event.code` specifica esattamente il tasto premuto. Per esempio, la maggioranza delle tastiere hanno due tasti `key:Shift`: uno nel lato sinistro e uno nel lato destro. `event.code` ci dice esattamente quale dei due viene premuto, `event.key` è invece responsabile invece del "significato" del tasto: cosa è (cioè uno "Shift").
73
73
74
-
Mettiamo il caso che volessimo gestire una scorciatoia: `key:Ctrl+Z` (o `key:Cmd+Z` su Mac). La maggior parte degli editor di testo associa a questa combinazione, l'azione "Undo". A quel punto potremmo, impostare un listener sul `keydown` e controllare quale tasto venga premuto.
74
+
Mettiamo il caso che volessimo gestire una scorciatoia: `key:Ctrl+Z` (o `key:Cmd+Z` su Mac). La maggior parte degli editor di testo associa a questa combinazione, l'azione "Undo". A quel punto potremmo impostare un listener sul `keydown` e controllare quale tasto venga premuto.
75
75
76
76
Ma qui ci troveremo di fronta a un dilemma: in questo listener, cosa dovremmo controllare? Il valore di `event.key` oppure quello di `event.code`?
77
77
78
-
Da una parte, il valore di `event.key` è un carattere, e cambia a seconda del linguaggio. Se il visitatore gestisce più lingue nel suo sistema operativo e passa da uno all'altro, lo stesso tasto restituirebbe caratteri differenti. Quindi ha senso controllare `event.code`, che è sempre lo stesso.
78
+
Da una parte, il valore di `event.key` è un carattere, e cambia a seconda del linguaggio. Se il visitatore gestisce più lingue nel suo sistema operativo e passa da una all'altra, lo stesso tasto restituirebbe caratteri differenti. Quindi ha senso controllare `event.code`, che è sempre lo stesso.
79
79
80
80
Ecco un esempio:
81
81
@@ -105,17 +105,17 @@ Questo può sembrare strano, ma è così. Le [specifiche](https://www.w3.org/TR/
105
105
106
106
Quindi, `event.code` può corrispondere a un carattere errato su layout non contemplati. A parità di lettera, per layout differenti potrebbero essere mappati tasti fisici differenti, portando ad avere codici differenti. Fortunatamente, questo avviene solo con alcuni di questi, ad esempio `keyA`, `keyQ`, `keyZ` (come abbiamo visto), ma non avviene con i tasti speciali come `Shift`. Si può vedere la lista nelle [specifiche](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system).
107
107
108
-
Per il tracciamento affidabile dei caratteri, che siano dipendenti dal layout, `event.key` potrebbe essere la soluzione migliore.
108
+
Per il tracciamento affidabile dei caratteri che sono dipendenti dal layout, `event.key` potrebbe essere la soluzione migliore.
109
109
110
-
Di contro, `event.code` ha il beneficio di essere sempre lo stesso, legato alla posizione fisica del tasto, anche se il visitatore dovesse modificare la lingua. E le scorciatoie ad essi relative funzioneranno bene anche in caso di cambio lingua.
110
+
Di contro, `event.code` ha il beneficio di essere sempre lo stesso, legato alla posizione fisica del tasto, anche se il visitatore dovesse modificare la lingua. E le scorciatoie ad esso relative funzioneranno bene anche in caso di cambio lingua.
111
111
112
112
Vogliamo gestire dei tasti dipendenti dal layout? Ecco che `event.key` è quello che fa per noi.
113
113
114
114
Oppure, vogliamo una scorciatoia che funzioni anche modificando la lingua? Allora `event.code` sarebbe più adatto.
115
115
116
116
## Auto-repeat
117
117
118
-
Se un tasto viene premuto abbastanza a lungo, si instaura l'"auto-repeat": l'evento `keydown`viene scaturito ancora e ancora, e alla fine, quando viene rilasciato, otteniamo un evento `keyup`. Quindi è abbastanza normale avere molti `keydown` ed un solo `keyup`.
118
+
Se un tasto viene premuto abbastanza a lungo, si instaura l'"auto-repeat": l'evento `keydown`scaturisce ancora e ancora e, alla fine, quando viene rilasciato, otteniamo un evento `keyup`. Quindi è abbastanza normale avere molti `keydown` ed un solo `keyup`.
119
119
120
120
Per eventi generati da auto-repeat, l'oggetto evento coinvolto avrà la proprietà `event.repeat` impostata a `true`.
121
121
@@ -168,7 +168,7 @@ Adesso le frecce e il tasto cancella funzionano.
168
168
169
169
In passato, c'era l'evento `keypress`, ed anche le proprietà `keyCode`, `charCode`, `which` dell'oggetto evento.
170
170
171
-
C'erano tante di quelle incompatibilità tra i vari browser, anche durante lo sviluppo delle specifiche da parte degli sviluppatori che cercavano di implementarle, che l'unica soluzione fu quella di deprecarli tutti, e creare degli eventi nuovi e moderni (descritti sopra in questo capitolo). Il codice vecchio funziona ancora, dal momento che i browser continuano a supportarli, ma assolutamente non c'è nessuna ragione per continuare a farlo.
171
+
C'erano tante di quelle incompatibilità tra i vari browser, anche durante lo sviluppo delle specifiche da parte degli sviluppatori che cercavano di implementarle, che l'unica soluzione fu quella di deprecarli tutti, e creare degli eventi nuovi e moderni (descritti sopra in questo capitolo). Il codice vecchio funziona ancora, dal momento che i browser continuano a supportarli, ma non c'è assolutamente nessuna ragione per continuare a farlo.
172
172
173
173
## Tastiere dei dispositivi mobile
174
174
@@ -190,6 +190,6 @@ Le principali proprietà degli eventi da tastiera sono:
190
190
-`code` il "codice del tasto" (`"KeyA"`, `"ArrowLeft"` e così via), specifico della posizione fisica del tasto sulla tastiera.
191
191
-`key` -- il carattere (`"A"`, `"a"` e così via), per tasti che non rappresentano caratteri, come `key:Esc`, solitamente ha lo stesso valore di `code`.
192
192
193
-
In passato, gli eventi da tastiera erano talvolta usati per tenere traccia degli input dell'utente nei campi dei form, cosa non molto affidabile perché l'input può avvenire in vari modi. Per gestire qualunque tipo di input abbiamo `input` e `change` (affrontati più avanti nel capitolo <info:events-change-input>). Questi vengono scaturiti da qualunque tipo di input, inclusi il copia-incolla o il riconoscimento vocale.
193
+
In passato, gli eventi da tastiera erano talvolta usati per tenere traccia degli input dell'utente nei campi dei form, cosa non molto affidabile perché l'input può avvenire in vari modi. Per gestire qualunque tipo di input abbiamo `input` e `change` (affrontati più avanti nel capitolo <info:events-change-input>). Questi scaturiscono da qualunque tipo di input, inclusi il copia-incolla o il riconoscimento vocale.
194
194
195
-
In generale, dovremmo usare gli eventi da tastiera solamente quando vogliamo usare, appunto, la tastiera. Ad esempio per scorciatoie o tasti speciali.
195
+
In generale, dovremmo usare gli eventi da tastiera solamente quando vogliamo usare, appunto, la tastiera. Ad esempio per scorciatoie o tasti speciali.
0 commit comments