1
00:00:00,410 --> 00:00:05,190
Questo video riprenderò da dove eravamo rimasti e continuiamo a parlare di quei tre eventi di Jay.

2
00:00:05,580 --> 00:00:10,620
Quindi il prossimo che voglio introdurre si chiama Keep press, quindi key press è uno

3
00:00:10,620 --> 00:00:17,730
dei modi in cui Jay Cory può aggiungere un ascoltatore di tasti agli elementi, quindi ti mostrerò sul molo qui se

4
00:00:17,730 --> 00:00:24,180
andremo al sezione degli eventi e guardiamo i tasti down e key press e key up questi sono tre

5
00:00:24,480 --> 00:00:30,900
diversi eventi che vengono attivati ​​quando un utente digita qualcosa sulla tastiera e le differenze sono leggermente sfumate.

6
00:00:31,140 --> 00:00:37,950
Quindi, il tasto giù viene attivato ogni volta che viene premuto un tasto e viene attivato subito dopo averlo premuto, quindi

7
00:00:37,950 --> 00:00:43,180
la chiave viene attivata quando rilasciamo il tasto e quindi la pressione dei tasti è leggermente diversa.

8
00:00:43,230 --> 00:00:48,720
viene attivata quando premi un tasto premuto e poi lo rilasci in modo che rappresenti l'intero tasto premuto su e giù.

9
00:00:48,720 --> 00:00:51,390
Alcune persone ti diranno che la pressione di un tasto

10
00:00:51,390 --> 00:00:52,890
E questo non è vero.

11
00:00:52,890 --> 00:00:55,790
In realtà spara tra il basso e il basso.

12
00:00:55,800 --> 00:00:57,450
Di solito non sempre.

13
00:00:57,450 --> 00:00:59,520
Quindi abbiamo un ottimo post di overflow dello stack.

14
00:00:59,670 --> 00:01:01,580
Quindi ti consiglio di leggere.

15
00:01:02,160 --> 00:01:08,400
Voglio mettere in evidenza questo piccolo pezzo qui in modo che il tasto giù e il tasto su forniscano un codice che indica

16
00:01:08,400 --> 00:01:12,370
quale tasto viene premuto mentre la pressione del tasto indica quale carattere è stato inserito.

17
00:01:12,810 --> 00:01:19,050
Quindi, un buon esempio di questo è che se ho un input di testo e qualcuno cambia tipo e poi

18
00:01:19,050 --> 00:01:26,400
ae stanno cercando di fare una chiave maiuscola e la chiave si accenderà sul tasto Maiusc e sul tasto minuscolo un tasto VS la

19
00:01:27,200 --> 00:01:33,840
stampa sparerà su una maiuscola a, quindi in realtà mi dà il carattere non solo che la chiave è stata premuta e

20
00:01:33,840 --> 00:01:38,520
in quale ordine ma il carattere del risultato finale effettivo quando usiamo un tasto modificatore

21
00:01:38,790 --> 00:01:42,860
come shift alla fine della giornata i tre diversi gli eventi sono molto simili.

22
00:01:42,930 --> 00:01:48,000
E la maggior parte delle volte puoi farla franca con una di queste e sto andando a premere

23
00:01:48,000 --> 00:01:54,730
Shoki solo perché è la più comune, quindi la pressione dei tasti funziona come Click dove selezioniamo qualcosa con il simbolo del dollaro.

24
00:01:54,750 --> 00:01:57,600
Quindi, ecco un esempio che seleziona qualcosa con il simbolo del dollaro.

25
00:01:57,600 --> 00:02:03,480
E poi cambiamo la pressione del tasto e passiamo in una funzione di callback e quella funzione di

26
00:02:03,480 --> 00:02:10,100
callback sarà chiamata ogni volta che un evento di pressione del tasto viene attivato sull'elemento o collezione di elementi selezionati.

27
00:02:10,110 --> 00:02:17,520
Quindi ho intenzione di dimostrare che ora tornerò al mio HMO e aggiungiamo un tipo di input

28
00:02:18,690 --> 00:02:19,750
uguale al testo.

29
00:02:20,250 --> 00:02:23,660
E lo lasceremo e aggiorneremo la nostra pagina.

30
00:02:24,340 --> 00:02:26,090
OK, quindi ora abbiamo un input qui.

31
00:02:26,550 --> 00:02:31,900
E prendiamo un codice che cancellerà quel registro ogni volta che viene premuto un tasto qui.

32
00:02:32,190 --> 00:02:39,800
Quindi aprite la console e dobbiamo prima selezionare l'input in modo da poter fare solo input in questo modo.

33
00:02:40,380 --> 00:02:42,800
E non è molto specifico in questo caso.

34
00:02:42,810 --> 00:02:44,790
C'è solo un input quindi va bene.

35
00:02:44,910 --> 00:02:51,480
Ma se avessimo le caselle di controllo e se avessimo input e pulsanti di colore, vorremmo specificare

36
00:02:51,480 --> 00:02:54,740
solo dove il testo è uguale al testo.

37
00:02:55,290 --> 00:02:57,370
Ma per ora l'input va bene.

38
00:02:57,390 --> 00:03:03,280
Assicurati di aver capito bene che lo seleziona, quindi aggiungiamo quel tasto premuto proprio così.

39
00:03:03,660 --> 00:03:11,480
E poi all'interno di qui aggiungiamo una funzione di callback che sarà chiamata ogni volta che viene premuto un tasto.

40
00:03:11,490 --> 00:03:21,220
Quindi in questo caso lasciamolo cancellare il log che hai premuto un tasto e premi invio.

41
00:03:21,840 --> 00:03:24,470
E ora se vado qui e scrivo una chiave.

42
00:03:24,510 --> 00:03:26,530
Quindi sto colpendo la lettera P adesso.

43
00:03:26,910 --> 00:03:33,060
Puoi vedere che ti preme premere per digitare e se digito un'altra chiave Tutto ciò che fa è mostrarmi un numero qui.

44
00:03:33,060 --> 00:03:34,770
Ecco come fa Chrome.

45
00:03:34,770 --> 00:03:38,480
Ma sto ottenendo un registro di concetti diverso mentre scrivo per ogni personaggio.

46
00:03:38,820 --> 00:03:44,040
Quindi è così che potremmo cancellare quel log sul personaggio qualcosa che spesso vogliamo fare è eseguire un

47
00:03:44,190 --> 00:03:46,630
codice a seconda di quale carattere è stato premuto.

48
00:03:46,650 --> 00:03:52,470
farà un nuovo da fare e quindi cancellerà l'input in modo da non devi fare clic su un pulsante come submit.

49
00:03:52,890 --> 00:03:58,890
Faremo un'app per la lista delle cose con Jay Querrey, dove puoi digitare new per fare come Walk the dog e

50
00:03:59,100 --> 00:04:01,520
premi invio, che poi prenderà quel testo qui e

51
00:04:01,560 --> 00:04:02,900
Hai appena premuto il tasto Invio.

52
00:04:03,180 --> 00:04:09,110
Quindi quello che vogliamo fare è ascoltare la pressione di un tasto, ma fare qualcosa solo se l'utente preme Invio.

53
00:04:09,270 --> 00:04:12,760
Per fare ciò, abbiamo effettivamente bisogno di cambiare un po 'il nostro codice qui.

54
00:04:12,840 --> 00:04:18,640
Quindi ho intenzione di copiare questo e aggiornerò la pagina e la incollerò di nuovo.

55
00:04:18,660 --> 00:04:23,430
Quindi stiamo ancora ascoltando la stampa dei tasti, ma lavoreremo con l'oggetto evento.

56
00:04:23,440 --> 00:04:29,580
che chiamerò evento e questo oggetto conterrà solo tutte le informazioni sull'evento key press.

57
00:04:29,910 --> 00:04:31,890
Aggiungerò qui un argomento

58
00:04:31,890 --> 00:04:37,260
Quindi annullerò quell'evento di registro in modo che tu possa vederlo e premo invio.

59
00:04:37,260 --> 00:04:43,710
E ora, se scrivo, puoi vedere che registro costantemente l'evento ogni volta e questo evento mi dice che il tipo

60
00:04:43,710 --> 00:04:45,200
è la pressione dei tasti.

61
00:04:45,210 --> 00:04:49,250
Mi dà un timestamp mi dà alcune altre cose.

62
00:04:49,350 --> 00:04:53,360
Una delle parti importanti è questo codice char 106.

63
00:04:53,490 --> 00:04:56,910
Inoltre c'è il codice chiave 1 o 6 e c'è.

64
00:04:56,910 --> 00:05:00,340
Che sono qui e puntano tutti a uno o sei.

65
00:05:00,360 --> 00:05:02,870
Ci sono alcune piccole differenze in cui non entrerò.

66
00:05:03,090 --> 00:05:07,650
Ci limiteremo a quello che è quello che i documenti di J Querrey usano anche ufficialmente.

67
00:05:07,980 --> 00:05:11,860
Quindi ciò a cui questo si riferisce è il codice della chiave che è stata premuta.

68
00:05:11,910 --> 00:05:18,540
Quindi ogni chiave ha il suo codice e può mostrarti qui i codici dei caratteri javascript.

69
00:05:18,760 --> 00:05:21,900
C'è una pagina qui che ti mostrerà in modo interattivo.

70
00:05:21,900 --> 00:05:27,480
Quindi se scrivo voglio sapere che cosa vede la lettera il codice corrispondente.

71
00:05:27,480 --> 00:05:33,910
A 67 se voglio controllare che cosa è necessario, devo premere il tasto Invio che farò ora.

72
00:05:34,180 --> 00:05:36,570
E mi dice il codice chiave lì alla fine.

73
00:05:36,870 --> 00:05:40,800
Questo è uno degli unici che conosco a memoria perché lo facciamo molto quando vogliamo

74
00:05:40,800 --> 00:05:42,860
che qualcosa accada quando premi il tasto Invio.

75
00:05:43,200 --> 00:05:43,440
OK.

76
00:05:43,440 --> 00:05:45,390
Quindi ricordiamo che il codice chiave 13.

77
00:05:45,660 --> 00:05:52,020
Torna qui al nostro codice e tutto ciò che vogliamo fare è scrivere un'istruzione IF al posto del nostro

78
00:05:52,020 --> 00:05:54,740
listener che dice se l'utente ha premuto invio.

79
00:05:54,750 --> 00:06:10,200
Quindi se un evento che è uguale a 13 significa che l'utente fa clic su Invio e ti avvertiremo che hai premuto invio proprio come quello

80
00:06:11,310 --> 00:06:18,250
e sbarazzati di questo per ora a causa di quel registro.

81
00:06:18,870 --> 00:06:23,160
Quindi un utente digita qualsiasi tipo di pressione di un tasto al posto di questo input.

82
00:06:23,400 --> 00:06:29,160
Quindi abbiamo questo oggetto evento che ora abbiamo aggiunto al nostro callback che era già

83
00:06:29,160 --> 00:06:29,490
passato.

84
00:06:29,520 --> 00:06:32,880
Anche se abbiamo lasciato questo fuori ma non lo stavamo catturando in una variabile.

85
00:06:33,030 --> 00:06:36,160
Quindi ora lo stiamo catturando in una variabile chiamata evento.

86
00:06:36,210 --> 00:06:39,870
Vedrai anche questo chiamato E a volte ma che può essere chiamato qualsiasi cosa.

87
00:06:39,870 --> 00:06:41,580
Ricorda che dipende totalmente da te.

88
00:06:41,700 --> 00:06:48,150
E quindi stiamo controllando se la proprietà è 13, che è il codice del carattere chiave di inserimento.

89
00:06:48,150 --> 00:06:49,360
Hit enter.

90
00:06:50,040 --> 00:06:55,830
E ora passiamo a questo e digiteremo alcune chiavi non di invio e non riceviamo tali avvisi.

91
00:06:55,860 --> 00:07:01,130
Riceviamo i registri del console perché abbiamo impostato l'ascoltatore originale qui.

92
00:07:01,980 --> 00:07:05,740
Ma ora sono io che cancello tutto e scriverò alcune cose e poi premerò Invio.

93
00:07:06,240 --> 00:07:08,160
E ora ti faccio colpire entrare.

94
00:07:08,190 --> 00:07:11,960
Quindi ogni volta che digito invio, lo farò adesso.

95
00:07:12,300 --> 00:07:13,900
Mi dice che premi Invio.

96
00:07:14,190 --> 00:07:14,670
Tutto ok.

97
00:07:14,760 --> 00:07:19,140
Quindi questo è tutto quello che voglio mostrare su stampa chiave che userà questo per fare o fare la

98
00:07:19,140 --> 00:07:20,390
lista in pochi video da ora.

99
00:07:20,760 --> 00:07:24,150
E controlleremo anche se l'evento è fuori 13