Tento zápis vás provede rozpoznáním klávesy tabulátoru v JavaScriptu.
Jak zjistit klíč karty v JavaScriptu?
Chcete-li zjistit klávesu tabulátoru v JavaScriptu, použijte následující techniky:
- “ querySelector() 'Metoda.'
- “ getElementbyId() 'Metoda.'
Uvedené přístupy budou demonstrovány jeden po druhém!
Metoda 1: Detekce klíče tabulátoru v JavaScriptu pomocí metody document.querySelector().
' document.querySelector() ” metoda přistupuje k prvnímu prvku, který odpovídá selektoru CSS, a poté metoda addEventListener() přidá do prvku, ke kterému se přistupuje, obsluhu události. Tyto metody lze použít pro přístup k typu vstupu a zjištění, zda je při zadávání hodnoty stisknuta klávesa Tab.
Syntax
živel. addEventListener ( událost , funkce , použijte Capture )
V dané syntaxi „ událost “ odkazuje na název události, “ funkce “ je specifická funkce, která se má provést, když dojde k události, a “ použijte Capture “ je volitelný argument.
dokument. querySelector ( CSS selektory )Ve výše uvedené syntaxi „ CSS selektory ” odkazují na jeden nebo více selektorů CSS, které lze zadat v metodě document.querySelector().
Pro lepší pochopení uvedeného konceptu si projděte následující příklad.
Příklad
Nejprve zadejte typ vstupu jako „ text “ s počáteční hodnotou zástupného symbolu a záhlavím v „
< h2 > Výsledek < / h2 >
Dále použijte „ document.querySelector() ” metoda pro přístup k zadanému vstupu a záhlaví a uložte je do proměnných s názvem “ vstup ' a ' výsledek “:
nechat vstup = dokument. querySelector ( 'vstup' ) ;nechat výsledek = dokument. querySelector ( 'h2' ) ;
Nyní přidejte „ keydown ” událost se vstupním polem pomocí metody addEventListener(). Tato událost upozorní uživatele vždy, když „ tab ve vstupním poli se stiskne klávesa ” použitím následující podmínky pomocí tlačítka “ vnitřníText ' vlastnictví:
vstup. addEventListener ( 'keydown' , ( a ) => {-li ( a. klíč === 'Tab' ) {
výsledek. vnitřníText = 'Stisknuta klávesa Tab' ;
} jiný {
výsledek. vnitřníText = 'Nestisknuta klávesa Tab' ;
}
V tomto případě, když uživatel stiskne klávesu Tab, přidaný upozorní na provedenou akci:
Metoda 2: Detekce klíče tabulátoru v JavaScriptu Pomocí metody document.getElementbyId().
' document.getElementById() ” metodu lze použít pro přístup k určitému prvku HTML na základě jeho id. Tuto metodu lze implementovat k získání vstupního pole a přidání události, která upozorní uživatele při každém stisknutí konkrétní klávesy, jako je například klávesa tabulátoru.
Syntax
dokument. getElementById ( Prvky )V dané syntaxi „ Prvky ” odkazuje na id zadaného prvku.
Pojďme si představit následující příklad.
Příklad
V níže uvedeném příkladu zahrňte typ vstupu a zástupnou hodnotu, jak je popsáno v předchozí metodě:
Nyní načtěte ID vstupního pole pomocí „ document.getElementById() “ metoda.
let input= document.getElementById(“tab”);
Nakonec přidejte událost s názvem „ keydown ” v metodě addEventListener(), která uživatele upozorní vždy, když se „ Tab je stisknuto tlačítko ”:
vstup. addEventListener ( 'keydown' , ( a ) => {-li ( a. klíč === 'Tab' ) {
upozornění ( 'Stisknuta klávesa Tab' ) ;
}
} ) ;
Výstup
Probrali jsme všechny nejjednodušší metody detekce klávesy tabulátoru v JavaScriptu.
Závěr
Chcete-li v JavaScriptu detekovat klíč tabelátoru, použijte „ addEventListener() “ s „ document.querySelector() ” metoda pro získání typu vstupu a použití události pro detekci zadaného klíče nebo “ getElementbyId() ” metoda pro načtení vstupního pole na základě jeho id a upozornění uživatele, kdykoli je splněna přidaná podmínka. Tento blog se zabývá zjišťováním klávesy tabulátoru v JavaScriptu.