Cum să detectați tasta Tab în JavaScript

Cum Sa Detectati Tasta Tab In Javascript



Adesea întâlnim site-uri web sau pagini web care cuprind elementul care face distincția între majuscule și minuscule. Mai mult, unele pagini web nu vă permit să introduceți datele atâta timp cât este apăsată tasta specifică, precum blocarea majusculelor, mai ales în cazul parolelor. În astfel de cazuri, detectarea tastei Tab în JavaScript devine foarte utilă pentru a alerta în prealabil utilizatorul cu privire la datele introduse.

Acest articol vă va ghida pentru a detecta tasta Tab în JavaScript.

Cum se detectează tasta Tab în JavaScript?

Pentru a detecta tasta Tab în JavaScript, aplicați următoarele tehnici:







  • querySelector() ” Metoda
  • getElementbyId() ” Metoda

Abordările menționate vor fi demonstrate una câte una!



Metoda 1: Detectați cheia Tab în JavaScript Folosind metoda document.querySelector().

document.querySelector() ” accesează primul element care se potrivește cu un selector CSS, iar apoi metoda addEventListener() adaugă un handler de evenimente la elementul accesat. Aceste metode pot fi aplicate pentru a accesa tipul de intrare și a detecta dacă tasta Tab este apăsată sau nu atunci când este introdusă valoarea acesteia.



Sintaxă





element. addEventListener ( eveniment , funcţie , foloseșteCapture )

În sintaxa dată, „ eveniment ” se referă la numele evenimentului, ” funcţie ” este funcția specifică care trebuie executată atunci când are loc evenimentul și „ foloseșteCapture ” este argumentul opțional.

document. querySelector ( selectoare CSS )

În sintaxa de mai sus, „ selectoare CSS ” se referă la unul sau mai mulți selectori CSS care pot fi specificați în metoda document.querySelector().



Parcurgeți următorul exemplu pentru o mai bună înțelegere a conceptului enunțat.

Exemplu
În primul rând, specificați tipul de intrare ca „ text ” cu o valoare de substituent inițială și un titlu în „ ' etichetă:

< intrare tip = 'text' substituent = „Introduceți text” >
< h2 > Rezultat < / h2 >

Apoi, aplicați „ document.querySelector() ” pentru accesarea intrării specificate și respectiv titlul și stocarea lor în variabilele numite ” intrare ' și ' rezultat ”:

lasa intrarea = document. querySelector ( 'intrare' ) ;
lasa rezultatul = document. querySelector ( 'h2' ) ;

Acum, adăugați „ Tasta în jos ” eveniment cu câmpul de intrare folosind metoda addEventListener(). Acest eveniment va anunța utilizatorul ori de câte ori „ fila tasta ” este apăsată în câmpul de introducere prin aplicarea următoarei condiții cu ajutorul butonului “ innerText ” proprietate:

intrare. addEventListener ( 'Tasta în jos' , ( și ) => {
dacă ( și. cheie === „Fila” ) {
rezultat. innerText = „Tasta Tab apăsată” ;
} altfel {
rezultat. innerText = „Tasta Tab nu este apăsată” ;
}

În acest caz, când utilizatorul va apăsa tasta Tab, cel adăugat va notifica despre acțiunea efectuată:

Metoda 2: Detectați cheia Tab în JavaScript Folosind metoda document.getElementbyId().

document.getElementById() ” metoda poate fi utilizată pentru a accesa un anumit element HTML pe baza id-ului său. Această metodă poate fi implementată pentru a obține câmpul de introducere și pentru a adăuga un eveniment pentru a alerta utilizatorul ori de câte ori este apăsată tasta specială, cum ar fi tasta Tab.

Sintaxă

document. getElementById ( elemente )

În sintaxa dată, „ elemente ” se referă la id-ul unui element specificat.

Să trecem în revistă următorul exemplu.

Exemplu
În exemplul de mai jos, includeți un tip de intrare și o valoare de substituent, așa cum s-a discutat în metoda anterioară:

< intrare tip = 'text' id = 'fila' substituent = „Introduceți text” >

Acum, preluați ID-ul câmpului de intrare folosind „ document.getElementById() ” metoda.

let input= document.getElementById(„filă”);

În cele din urmă, adăugați un eveniment numit „ Tasta în jos ” în metoda addEventListener(), care va alerta utilizatorul ori de câte ori „ Tab tasta ” este apăsată:

intrare. addEventListener ( 'Tasta în jos' , ( și ) => {
dacă ( și. cheie === „Fila” ) {
alerta ( „Tasta Tab apăsată” ) ;
}
} ) ;

Ieșire

Am discutat despre toate cele mai simple metode de a detecta tasta Tab în JavaScript.

Concluzie

Pentru a detecta tasta Tab în JavaScript, utilizați „ addEventListener() ' cu ' document.querySelector() ” pentru obținerea tipului de intrare și aplicarea unui eveniment pentru detectarea cheii specificate sau a ” getElementbyId() ” metoda pentru preluarea câmpului de intrare pe baza id-ului acestuia și notificarea utilizatorului ori de câte ori condiția adăugată este îndeplinită. Acest blog a ghidat despre detectarea tastei Tab în JavaScript.