Come rilevare il tasto Tab in JavaScript

Spesso incontriamo siti Web o pagine Web che comprendono l'elemento distintivo del caso. Inoltre, alcune pagine Web non consentono di inserire i dati fintanto che viene premuta la chiave specifica, come il blocco CAPS, soprattutto nel caso di password. In tali casi, il rilevamento del tasto Tab in JavaScript diventa molto utile per avvisare in anticipo l'utente dei dati inseriti.

Questo articolo ti guiderà a rilevare il tasto Tab in JavaScript.

Come rilevare il tasto Tab in JavaScript?

Per rilevare il tasto TAB in JavaScript, applica le seguenti tecniche:

• "QuerySelector ()" Metodo
• "getElementById ()" Metodo

Gli approcci menzionati saranno dimostrati uno per uno!

Metodo 1: rilevare il tasto Tab in JavaScript utilizzando il documento.Metodo QuerySelector ()

IL "documento.QuerySelector ()"Metodo Accesso al primo elemento corrispondente a un selettore CSS, quindi il metodo AddeventListener () aggiunge un gestore di eventi all'elemento accessibile. Questi metodi possono essere applicati per accedere al tipo di input e rilevare se il tasto Tab viene premuto o meno quando viene inserito il suo valore.

Sintassi

elemento.addEventListener (evento, funzione, usecapture)

Nella sintassi data, "evento"Si riferisce al nome dell'evento,"funzione"È la funzione specifica da eseguire quando si verifica l'evento e"usecapture"È l'argomento opzionale.

documento.QuerySelector (selettori CSS)

Nella sintassi sopra, "Selettori CSS"Fare riferimento a uno o più selettori CSS che possono essere specificati nel documento.Metodo QuerySelector ().

Passare attraverso il seguente esempio per una migliore comprensione del concetto dichiarato.

Esempio
In primo luogo, specificare il tipo di input come "testo"Con un valore di segnaposto iniziale e un'intestazione in""Tag:

Risultato

Successivamente, applica il “documento.QuerySelector ()"Metodo per accedere rispettivamente all'input specificato e l'intestazione e archiviarli nelle variabili denominate"ingresso" E "risultato":

Sia input = document.QuerySelector ("Input");
Sia risultato = documento.QuerySelector ("H2");

Ora aggiungi il "keydown"Evento con il campo di input utilizzando il metodo AddeventListener (). Questo evento avviserà l'utente ogni volta che il "scheda"Il tasto viene premuto nel campo di input applicando la seguente condizione con l'aiuto di"testo interno" proprietà:

ingresso.addEventListener ("keydown", (e) =>
Se (e.key === "tab")
risultato.InnerText = "Tab Tasto premuto";
altro
risultato.InnerText = "Tab tasto non premuto";

In questo caso, quando l'utente premi il tasto TAB, il aggiunto avviserà sull'azione eseguita:

Metodo 2: rileva il tasto TAB in JavaScript utilizzando il documento.metodo getElementById ()

IL "documento.getElementById ()"Il metodo può essere utilizzato per accedere a un particolare elemento HTML in base al suo ID. Questo metodo può essere implementato per ottenere il campo di input e aggiungere un evento per avvisare l'utente ogni volta che viene premuto il tasto particolare, come il tasto Tab.

Sintassi

documento.getElementByID (elementID)

Nella sintassi data, "Elementid"Si riferisce all'ID di un elemento specificato.

Proviamo il seguente esempio.

Esempio
Nell'esempio seguente, includere un tipo di input e un valore di segnaposto come discusso nel metodo precedente:

Ora, prendi l'ID campo di input usando "documento.getElementById ()" metodo.

Sia input = document.getElementById ("Tab");

Infine, aggiungi un evento chiamato "keydown"Nel metodo AddeventListener (), che avviserà l'utente ogni volta che"Scheda"Il tasto viene premuto:

ingresso.addEventListener ("keydown", (e) =>
Se (e.key === "tab")
Avviso ("Tasto Tab pressato");

);

Produzione

Abbiamo discusso di tutti i metodi più semplici per rilevare il tasto Tab in JavaScript.

Conclusione

Per rilevare il tasto Tab in JavaScript, utilizzare il “addEventListener ()" con il "documento.QuerySelector ()"Metodo per ottenere il tipo di input e applicare un evento per rilevare la chiave specificata o"getElementById ()"Metodo per recuperare il campo di input in base al suo ID e avvisare l'utente ogni volta che la condizione aggiunta è soddisfatta. Questo blog ha guidato sul rilevamento del tasto delle schede in JavaScript.