Hogyan lehet észlelni a Tab kulcsot a JavaScriptben

Gyakran találkozunk olyan webhelyekkel vagy weboldalakkal, amelyek tartalmazzák a kis- és nagybetűk megkülönböztető elemét. Ezenkívül egyes weboldalak nem teszik lehetővé az adatok bevitelét mindaddig, amíg az adott billentyűt, például a caps lockot lenyomják, különösen a jelszavak esetében. Ilyen esetekben a tabulátor billentyű észlelése a JavaScriptben nagyon hasznos, hogy előzetesen figyelmeztesse a felhasználót a bevitt adatokra.

Ez az írás elvezeti Önt a tabulátor billentyű észleléséhez a JavaScriptben.

Hogyan lehet észlelni a Tab kulcsot a JavaScriptben?

A tabulátor billentyű észleléséhez JavaScriptben alkalmazza a következő technikákat:

' querySelector() ” Módszer
' getElementbyId() ” Módszer

Az említett megközelítések egyenként kerülnek bemutatásra!

1. módszer: Tab kulcs észlelése JavaScriptben a document.querySelector() metódus használatával

Az ' document.querySelector() ” metódus eléri a CSS-szelektornak megfelelő első elemet, majd az addEventListener() metódus hozzáad egy eseménykezelőt az elért elemhez. Ezekkel a módszerekkel lehet elérni a beviteli típust, és megállapítani, hogy a tabulátor billentyű le van-e nyomva az értékének megadásakor.

Szintaxis

elem. addEventListener ( esemény , funkció , useCapture )

Az adott szintaxisban a „ esemény ' az esemény nevére utal, ' funkció ' az esemény bekövetkezésekor végrehajtandó speciális függvény, és ' useCapture ” az opcionális argumentum.

dokumentum. querySelector ( CSS-választók )

A fenti szintaxisban: ' CSS-választók ” utal egy vagy több CSS-választóra, amely a document.querySelector() metódusban adható meg.

A megfogalmazott fogalom jobb megértéséhez nézze át a következő példát.

Példa
Először adja meg a beviteli típust a következőképpen szöveg ' kezdeti helyőrző értékkel és egy címsorral a ' ” címke:

< bemenet típus = 'szöveg' helykitöltő = 'Szöveg beírása' >
< h2 > Eredmény < / h2 >

Ezután alkalmazza a „ document.querySelector() ” metódussal elérheti a megadott bemenetet és a címsort, és tárolhatja azokat a „ bemenet ” és „ eredmény ”:

engedje be a bevitelt = dokumentum. querySelector ( 'bemenet' ) ;
legyen eredmény = dokumentum. querySelector ( 'h2' ) ;

Most adja hozzá a „ billentyűlenyomás ” eseményt a beviteli mezővel az addEventListener() metódus használatával. Ez az esemény értesíti a felhasználót, amikor a „ lapon ” gomb megnyomása a beviteli mezőben a következő feltétel alkalmazásával a „ innerText ' ingatlan:

bemenet. addEventListener ( 'keydown' , ( és ) => {
ha ( és. kulcs === 'Tab' ) {
eredmény. innerText = 'Tab gomb lenyomva' ;
} más {
eredmény. innerText = 'Tab gomb nincs lenyomva' ;
}

Ebben az esetben, amikor a felhasználó megnyomja a Tab billentyűt, a hozzáadott értesítést küld a végrehajtott műveletről:

2. módszer: Tab kulcs észlelése JavaScriptben a document.getElementbyId() metódus használatával

Az ' document.getElementById() ” metódus használható egy adott HTML-elem eléréséhez az azonosítója alapján. Ez a módszer megvalósítható a beviteli mező lekérésére és egy esemény hozzáadására, amely figyelmezteti a felhasználót, amikor megnyomja az adott billentyűt, például a tabulátor billentyűt.

Szintaxis

dokumentum. getElementById ( elemeket )

Az adott szintaxisban a „ elemeket ” egy megadott elem azonosítójára utal.

Tekintsük át a következő példát.

Példa
Az alábbi példában adjon meg egy beviteli típust és egy helyőrző értéket az előző módszerben leírtak szerint:

< bemenet típus = 'szöveg' id = 'lap' helykitöltő = 'Szöveg beírása' >

Most kérje le a beviteli mező azonosítóját a ' document.getElementById() ” módszerrel.

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

Végül adjon hozzá egy eseményt ' billentyűlenyomás ” az addEventListener() metódusban, amely figyelmezteti a felhasználót, amikor a „ Tab ” gomb megnyomva:

bemenet. addEventListener ( 'keydown' , ( és ) => {
ha ( és. kulcs === 'Tab' ) {
éber ( 'Tab gomb lenyomva' ) ;
}
} ) ;

Kimenet

Megbeszéltük az összes legegyszerűbb módszert a tabulátor billentyű észlelésére a JavaScriptben.

Következtetés

A tabulátor billentyű észleléséhez JavaScriptben használja a ' addEventListener() ' a ... val ' document.querySelector() ” metódus a bemeneti típus lekérésére és egy esemény alkalmazására a megadott kulcs észlelésére vagy a „ getElementbyId() ” módszer a beviteli mező lekérésére az azonosítója alapján, és értesíti a felhasználót, ha a hozzáadott feltétel teljesül. Ez a blog útmutatót tartalmaz a tabulátor billentyűk észleléséhez a JavaScriptben.

Hogyan lehet észlelni a Tab kulcsot a JavaScriptben