Come rilevare il tasto Tab in JavaScript

Spesso ci imbattiamo in siti Web o pagine Web che comprendono l'elemento case-sensitive. Inoltre, alcune pagine web non consentono di inserire i dati fintanto che viene premuto il tasto specifico, come il blocco maiuscole, soprattutto nel caso di password. In questi 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: Rileva il tasto Tab in JavaScript utilizzando il metodo document.querySelector()

Il ' document.querySelector() ” accede al primo elemento che corrisponde a un selettore CSS, quindi il metodo addEventListener() aggiunge un gestore di eventi all'elemento a cui si accede. Questi metodi possono essere applicati per accedere al tipo di input e rilevare se il tasto Tab viene premuto o meno quando viene immesso 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 facoltativo.

documento. querySelector ( Selettori CSS )

Nella sintassi sopra, ' Selettori CSS ” fare riferimento a uno o più selettori CSS che possono essere specificati nel metodo document.querySelector().

Passa attraverso il seguente esempio per una migliore comprensione del concetto affermato.

Esempio
Innanzitutto, specifica il tipo di input come ' testo ” con un valore segnaposto iniziale e un'intestazione nel “ ” tag:

< ingresso genere = 'testo' segnaposto = 'Inserire il testo' >
< h2 > Risultato < / h2 >

Quindi, applica il ' document.querySelector() ” metodo per accedere rispettivamente all'input specificato e all'intestazione e memorizzarli nelle variabili denominate “ ingresso ' e ' risultato ”:

lascia entrare = documento. querySelector ( 'ingresso' ) ;
lascia risultato = documento. querySelector ( 'h2' ) ;

Ora aggiungi il ' keydown ” con il campo di input utilizzando il metodo addEventListener(). Questo evento avviserà l'utente ogni volta che il ' scheda ” viene premuto nel campo di inserimento applicando la seguente condizione con l'ausilio del tasto “ testo interno ' proprietà:

ingresso. addEventListener ( 'keydown' , ( e ) => {
Se ( e. chiave === 'scheda' ) {
risultato. testo interno = 'Tasto Tab premuto' ;
} altro {
risultato. testo interno = 'Tasto Tab non premuto' ;
}

In questo caso, quando l'utente premerà il tasto Tab, l'aggiunto avviserà dell'azione eseguita:

Metodo 2: Rileva il tasto Tab in JavaScript utilizzando il metodo document.getElementbyId()

Il ' document.getElementById() ” 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 un determinato tasto, come il tasto Tab.

Sintassi

documento. getElementById ( elementi )

Nella sintassi data, ' elementi ” si riferisce all'id di un elemento specificato.

Esaminiamo il seguente esempio.

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

< ingresso genere = 'testo' id = 'scheda' segnaposto = 'Inserire il testo' >

Ora, recupera l'id del campo di input usando ' document.getElementById() ' metodo.

let input= document.getElementById('scheda');

Infine, aggiungi un evento chiamato ' keydown ” nel metodo addEventListener(), che avviserà l'utente ogni volta che “ Tab viene premuto il tasto :

ingresso. addEventListener ( 'keydown' , ( e ) => {
Se ( e. chiave === 'scheda' ) {
mettere in guardia ( 'Tasto Tab premuto' ) ;
}
} ) ;

Produzione

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

Conclusione

Per rilevare la chiave di tabulazione in JavaScript, utilizzare il ' addEventListener() ' con il ' document.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 notificare all'utente ogni volta che la condizione aggiunta è soddisfatta. Questo blog ha guidato sul rilevamento della chiave di tabulazione in JavaScript.

Come rilevare il tasto Tab in JavaScript