Questo video riprenderò da dove eravamo rimasti e continuiamo a parlare di quei tre eventi di Jay.
Quindi il prossimo che voglio introdurre si chiama Keep press, quindi key press è uno
dei modi in cui Jay Cory può aggiungere un ascoltatore di tasti agli elementi, quindi ti mostrerò sul molo qui se
andremo al sezione degli eventi e guardiamo i tasti down e key press e key up questi sono tre
diversi eventi che vengono attivati ​​quando un utente digita qualcosa sulla tastiera e le differenze sono leggermente sfumate.
Quindi, il tasto giù viene attivato ogni volta che viene premuto un tasto e viene attivato subito dopo averlo premuto, quindi
la chiave viene attivata quando rilasciamo il tasto e quindi la pressione dei tasti è leggermente diversa.
viene attivata quando premi un tasto premuto e poi lo rilasci in modo che rappresenti l'intero tasto premuto su e giù.
Alcune persone ti diranno che la pressione di un tasto
E questo non è vero.
In realtà spara tra il basso e il basso.
Di solito non sempre.
Quindi abbiamo un ottimo post di overflow dello stack.
Quindi ti consiglio di leggere.
Voglio mettere in evidenza questo piccolo pezzo qui in modo che il tasto giù e il tasto su forniscano un codice che indica
quale tasto viene premuto mentre la pressione del tasto indica quale carattere è stato inserito.
Quindi, un buon esempio di questo è che se ho un input di testo e qualcuno cambia tipo e poi
ae stanno cercando di fare una chiave maiuscola e la chiave si accenderà sul tasto Maiusc e sul tasto minuscolo un tasto VS la
stampa sparerà su una maiuscola a, quindi in realtà mi dà il carattere non solo che la chiave è stata premuta e
in quale ordine ma il carattere del risultato finale effettivo quando usiamo un tasto modificatore
come shift alla fine della giornata i tre diversi gli eventi sono molto simili.
E la maggior parte delle volte puoi farla franca con una di queste e sto andando a premere
Shoki solo perché è la più comune, quindi la pressione dei tasti funziona come Click dove selezioniamo qualcosa con il simbolo del dollaro.
Quindi, ecco un esempio che seleziona qualcosa con il simbolo del dollaro.
E poi cambiamo la pressione del tasto e passiamo in una funzione di callback e quella funzione di
callback sarà chiamata ogni volta che un evento di pressione del tasto viene attivato sull'elemento o collezione di elementi selezionati.
Quindi ho intenzione di dimostrare che ora tornerò al mio HMO e aggiungiamo un tipo di input
uguale al testo.
E lo lasceremo e aggiorneremo la nostra pagina.
OK, quindi ora abbiamo un input qui.
E prendiamo un codice che cancellerà quel registro ogni volta che viene premuto un tasto qui.
Quindi aprite la console e dobbiamo prima selezionare l'input in modo da poter fare solo input in questo modo.
E non è molto specifico in questo caso.
C'è solo un input quindi va bene.
Ma se avessimo le caselle di controllo e se avessimo input e pulsanti di colore, vorremmo specificare
solo dove il testo è uguale al testo.
Ma per ora l'input va bene.
Assicurati di aver capito bene che lo seleziona, quindi aggiungiamo quel tasto premuto proprio così.
E poi all'interno di qui aggiungiamo una funzione di callback che sarà chiamata ogni volta che viene premuto un tasto.
Quindi in questo caso lasciamolo cancellare il log che hai premuto un tasto e premi invio.
E ora se vado qui e scrivo una chiave.
Quindi sto colpendo la lettera P adesso.
Puoi vedere che ti preme premere per digitare e se digito un'altra chiave Tutto ciò che fa è mostrarmi un numero qui.
Ecco come fa Chrome.
Ma sto ottenendo un registro di concetti diverso mentre scrivo per ogni personaggio.
Quindi è così che potremmo cancellare quel log sul personaggio qualcosa che spesso vogliamo fare è eseguire un
codice a seconda di quale carattere è stato premuto.
farà un nuovo da fare e quindi cancellerà l'input in modo da non devi fare clic su un pulsante come submit.
Faremo un'app per la lista delle cose con Jay Querrey, dove puoi digitare new per fare come Walk the dog e
premi invio, che poi prenderà quel testo qui e
Hai appena premuto il tasto Invio.
Quindi quello che vogliamo fare è ascoltare la pressione di un tasto, ma fare qualcosa solo se l'utente preme Invio.
Per fare ciò, abbiamo effettivamente bisogno di cambiare un po 'il nostro codice qui.
Quindi ho intenzione di copiare questo e aggiornerò la pagina e la incollerò di nuovo.
Quindi stiamo ancora ascoltando la stampa dei tasti, ma lavoreremo con l'oggetto evento.
che chiamerò evento e questo oggetto conterrà solo tutte le informazioni sull'evento key press.
Aggiungerò qui un argomento
Quindi annullerò quell'evento di registro in modo che tu possa vederlo e premo invio.
E ora, se scrivo, puoi vedere che registro costantemente l'evento ogni volta e questo evento mi dice che il tipo
è la pressione dei tasti.
Mi dà un timestamp mi dà alcune altre cose.
Una delle parti importanti è questo codice char 106.
Inoltre c'è il codice chiave 1 o 6 e c'è.
Che sono qui e puntano tutti a uno o sei.
Ci sono alcune piccole differenze in cui non entrerò.
Ci limiteremo a quello che è quello che i documenti di J Querrey usano anche ufficialmente.
Quindi ciò a cui questo si riferisce è il codice della chiave che è stata premuta.
Quindi ogni chiave ha il suo codice e può mostrarti qui i codici dei caratteri javascript.
C'è una pagina qui che ti mostrerà in modo interattivo.
Quindi se scrivo voglio sapere che cosa vede la lettera il codice corrispondente.
A 67 se voglio controllare che cosa è necessario, devo premere il tasto Invio che farò ora.
E mi dice il codice chiave lì alla fine.
Questo è uno degli unici che conosco a memoria perché lo facciamo molto quando vogliamo
che qualcosa accada quando premi il tasto Invio.
OK.
Quindi ricordiamo che il codice chiave 13.
Torna qui al nostro codice e tutto ciò che vogliamo fare è scrivere un'istruzione IF al posto del nostro
listener che dice se l'utente ha premuto invio.
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
e sbarazzati di questo per ora a causa di quel registro.
Quindi un utente digita qualsiasi tipo di pressione di un tasto al posto di questo input.
Quindi abbiamo questo oggetto evento che ora abbiamo aggiunto al nostro callback che era già
passato.
Anche se abbiamo lasciato questo fuori ma non lo stavamo catturando in una variabile.
Quindi ora lo stiamo catturando in una variabile chiamata evento.
Vedrai anche questo chiamato E a volte ma che può essere chiamato qualsiasi cosa.
Ricorda che dipende totalmente da te.
E quindi stiamo controllando se la proprietà è 13, che è il codice del carattere chiave di inserimento.
Hit enter.
E ora passiamo a questo e digiteremo alcune chiavi non di invio e non riceviamo tali avvisi.
Riceviamo i registri del console perché abbiamo impostato l'ascoltatore originale qui.
Ma ora sono io che cancello tutto e scriverò alcune cose e poi premerò Invio.
E ora ti faccio colpire entrare.
Quindi ogni volta che digito invio, lo farò adesso.
Mi dice che premi Invio.
Tutto ok.
Quindi questo è tutto quello che voglio mostrare su stampa chiave che userà questo per fare o fare la
lista in pochi video da ora.
E controlleremo anche se l'evento è fuori 13