Dit artikel zal u helpen om de tab-toets in JavaScript te detecteren.
Hoe de Tab-toets in JavaScript te detecteren?
Pas de volgende technieken toe om de tab-toets in JavaScript te detecteren:
- “ querySelector() ” Methode
- “ getElementbyId() ” Methode
De genoemde benaderingen worden één voor één gedemonstreerd!
Methode 1: Tab-toets detecteren in JavaScript met de methode document.querySelector()
De ' document.querySelector() ” heeft toegang tot het eerste element dat overeenkomt met een CSS-selector, en vervolgens voegt de methode addEventListener() een gebeurtenishandler toe aan het geopende element. Deze methoden kunnen worden toegepast om toegang te krijgen tot het invoertype en om te detecteren of de tab-toets al dan niet wordt ingedrukt wanneer de waarde wordt ingevoerd.
Syntaxis
element. addEventListener ( evenement , functie , gebruik Capture )
In de gegeven syntaxis, ' evenement ” verwijst naar de naam van het evenement, “ functie ” is de specifieke functie die moet worden uitgevoerd wanneer de gebeurtenis zich voordoet, en “ gebruik Capture ” is het optionele argument.
document. querySelector ( CSS-kiezers )In de bovenstaande syntaxis, ' CSS-kiezers ” verwijzen naar een of meer CSS-selectors die kunnen worden opgegeven in de document.querySelector()-methode.
Doorloop het volgende voorbeeld voor een beter begrip van het genoemde concept.
Voorbeeld
Geef eerst het invoertype op als ' tekst ” met een initiële tijdelijke aanduiding en een kop in de “
< h2 > Resultaat < / h2 >
Pas vervolgens de ' document.querySelector() ” methode om toegang te krijgen tot respectievelijk de gespecificeerde invoer en de kop en deze op te slaan in de variabelen met de naam “ invoer ' en ' resultaat ”:
laat invoer = document. querySelector ( 'invoer' ) ;laat resultaat = document. querySelector ( 'h2' ) ;
Voeg nu de ' toets neer ” gebeurtenis met het invoerveld met behulp van de methode addEventListener() . Deze gebeurtenis zal de gebruiker op de hoogte stellen wanneer de “ tabblad ” toets wordt ingedrukt in het invoerveld door de volgende voorwaarde toe te passen met behulp van de “ innerText ' eigendom:
invoer. addEventListener ( 'toets neer' , ( en ) => {als ( en. sleutel === 'Tabblad' ) {
resultaat. innerText = 'Tab-toets ingedrukt' ;
} anders {
resultaat. innerText = 'Tab-toets niet ingedrukt' ;
}
In dit geval, wanneer de gebruiker op de tab-toets drukt, zal de toegevoegde gebruiker informeren over de uitgevoerde actie:
Methode 2: Tab-toets detecteren in JavaScript met behulp van de document.getElementbyId()-methode
De ' document.getElementById() ” kan worden gebruikt om toegang te krijgen tot een bepaald HTML-element op basis van zijn id. Deze methode kan worden geïmplementeerd om het invoerveld te krijgen en een gebeurtenis toe te voegen om de gebruiker te waarschuwen wanneer de specifieke toets wordt ingedrukt, zoals de tab-toets.
Syntaxis
document. getElementById ( elementen )In de gegeven syntaxis, ' elementen ” verwijst naar de id van een opgegeven element.
Laten we het volgende voorbeeld bekijken.
Voorbeeld
Neem in het onderstaande voorbeeld een invoertype en een tijdelijke aanduiding op, zoals besproken in de vorige methode:
Haal nu het invoerveld-ID op met behulp van de ' document.getElementById() ” methode.
let input= document.getElementById(“tab”);
Voeg ten slotte een evenement toe met de naam ' toets neer ” in de methode addEventListener(), die de gebruiker waarschuwt wanneer de “ Tab ”-toets is ingedrukt:
invoer. addEventListener ( 'toets neer' , ( en ) => {als ( en. sleutel === 'Tabblad' ) {
alarmeren ( 'Tab-toets ingedrukt' ) ;
}
} ) ;
Uitgang:
We hebben alle eenvoudigste methoden besproken om de tab-toets in JavaScript te detecteren.
Conclusie
Om de tab-toets in JavaScript te detecteren, gebruikt u de ' addEventListener() ' met de ' document.querySelector() ” methode voor het verkrijgen van het invoertype en het toepassen van een gebeurtenis voor het detecteren van de gespecificeerde sleutel of de “ getElementbyId() ”-methode voor het ophalen van het invoerveld op basis van zijn id en om de gebruiker op de hoogte te stellen wanneer aan de toegevoegde voorwaarde is voldaan. Deze blog heeft geleid tot het detecteren van de tabsleutel in JavaScript.