Come funzionano i codici chiave in JavaScript?

I codi chiave in JavaScript funzionano assegnando un particolare valore del codice chiave alla chiave corrispondente. Questa funzionalità aiuta a impedire all'utente di inserire un valore non valido, specialmente quando si compila un modulo o un questionario. Allo stesso modo, spingendo l'utente finale del abilitato "blocco maiuscole"Quando si riempie un campo sensibile al caso.

Cosa sono i codici chiave?

JavaScript assegna un codice numerico a ogni tasto contenuto in una tastiera. I codici chiave per le chiavi alfanumeriche e funzionali sono numerati consecutivamente. In questo blog, verrà spiegato il funzionamento dei seguenti codi chiave contro le chiavi particolari:

Chiave	Chiave
Scheda	9
accedere	13

Sintassi

evento.chiave

Nella sintassi sopra:

• "evento"Si riferisce all'evento allegato alla chiave particolare rispetto al codice chiave.

Come funzionano i codici chiave in JavaScript?

Il funzionamento dei codici chiave può essere effettuato utilizzando il "addEventListener ()"Metodo in combinazione con i seguenti metodi:

• "getElementById ()" metodo.
• "QuerySelector ()" metodo.

Approccio 1: funzionamento dei codici chiave in JavaScript usando il metodo getElementById ()

IL "addEventListener ()"Il metodo allega un evento all'elemento e"getElementById ()"Il metodo accede a un elemento con il specificato"id". Questi metodi possono essere utilizzati per accedere al campo di testo di input e rilevare la chiave particolare con l'aiuto del codice chiave assegnato e un evento allegato.

Sintassi

elemento.addEventListener (evento, ascoltatore, uso);

Nella sintassi sopra:

• "evento"Indica l'evento allegato.
• "ascoltatore"Corrisponde alla funzione che verrà invocata.
• "utilizzo"È il valore opzionale.

documento.getElementById (elemento)

Nella sintassi data:

• "elemento"Corrisponde a"id"Essere recuperati contro l'elemento particolare.

Esempio

Concentriamoci sull'esempio di seguito:

Rileva il tasto TAB

Sia get = document.getElementById ("testo");
Sia risultato = documento.getElementById ("testa");
Ottenere.addEventListener ("keydown", (e) =>
Se (e.keycode === 9)
risultato.InnerText = "Tab Tasto premuto";

altro
risultato.InnerText = "Tab tasto non premuto";

);

In code-snippet sopra:

• Allocare un input "testo"Campo con il specificato"id" E "segnaposto" valore.
• Nel passaggio successivo, includere l'intestazione dichiarata per contenere il messaggio visualizzato nel modello di oggetto document (DOM) al momento del rilevamento della chiave particolare.
• Nella parte JavaScript del codice, accedi all'input "testo”Campo e l'intestazione inclusi dal loro"id" usando il "getElementById ()" metodo.
• Successivamente, allega un evento chiamato "keydown" al "ingresso"Campo di testo usando il"addEventListener ()" metodo.
• Inoltre, applica il "chiave"Proprietà e assegnargli il codice chiave del"Scheda" chiave.
• Ciò comporterà la visualizzazione del messaggio dichiarato in "Se"Condizione come intestazione al rilevamento del tasto TAB tramite"testo interno" proprietà.
• Nell'altro caso, il "altro"La condizione eseguirà.

Produzione

Dall'output sopra, si può osservare che il rilevamento del "Scheda"La chiave viene eseguita con successo.

Approccio 2: funzionamento dei codici chiave in JavaScript usando il metodo QuerySelector ()

IL "QuerySelector ()"Il metodo ottiene il primo elemento che corrisponde a un selettore CSS. Questo metodo può essere utilizzato per accedere allo stesso modo al campo di testo di input e allegare un evento, con conseguente rilevamento della chiave specificata in base al codice chiave.

Sintassi

documento.QuerySelector (selettori CSS)

Nella sintassi sopra indicata:

• "Selettori CSS"Si riferisce a uno o più di un selettore CSS.

Esempio

Osserviamo il seguente esempio passo dopo passo:

Rileva il tasto Invio

Sia get = document.QuerySelector ("Input");
Sia risultato = documento.QuerySelector ("H2");
Ottenere.addEventListener ("keydown", (e) =>
Se (e.KeyCode === 13)
risultato.InnerText = "INVIO TASTURA PRESSATO";

altro
risultato.InnerText = "INVIO THETTO NON ASSEMMATO";

);

Nelle righe di codice sopra, eseguire i seguenti passaggi:

• Ricordiamo i passaggi discussi per includere un campo di testo input e un'intestazione.
• Nella parte di JavaScript, accedi allo stesso modo nel campo di input allocato e l'intestazione usando "QuerySelector ()" metodo.
• Nel passaggio successivo, allega un evento chiamato "keydown" al "ingresso"Campo di testo" usando il "addEventListener ()" metodo.
• Inoltre, specifica il “chiave"Del"accedereTasto "tramite il"chiave" proprietà.
• Ciò comporterà la visualizzazione del messaggio corrispondente in "Se"Condizione sulla rilevata"accedere" chiave.
• Nell'altro caso, il "altro"La condizione rimarrà in vigore.

Produzione

Nell'output di cui sopra, si può osservare che al momento del rilevamento del "accedere"Chiave, le modifiche alla testa, rendendo così il rilevamento di successo.

Conclusione

IL "addEventListener ()"Metodo in combinazione con il"getElementById ()Metodo ", o"QuerySelector ()"Il metodo può essere implementato per garantire il funzionamento dei codici chiave in JavaScript. Il precedente approccio può essere utilizzato per accedere al campo di testo di input e rilevare la chiave specifica tramite il codice chiave con l'aiuto di un evento allegato. Quest'ultimo approccio può essere applicato per accedere al campo di testo di input e allegare un evento, che rileverà la chiave specifica in base al suo codice chiave. Questo tutorial ha spiegato il funzionamento dei codici chiave in JavaScript.