Paano Matukoy ang Tab Key sa JavaScript

Madalas kaming nakakatagpo ng mga website o web page na binubuo ng case-sensitive na elemento. Bukod dito, hindi ka pinapayagan ng ilang web page na ipasok ang data hangga't pinindot ang partikular na key, gaya ng caps lock, lalo na sa kaso ng mga password. Sa ganitong mga kaso, ang pag-detect sa key ng tab sa JavaScript ay nagiging lubhang kapaki-pakinabang para sa pag-alerto sa gumagamit ng inilagay na data bago pa man.

Gagabayan ka ng write-up na ito upang makita ang key ng tab sa JavaScript.

Paano Matukoy ang Tab Key sa JavaScript?

Upang matukoy ang tab key sa JavaScript, ilapat ang mga sumusunod na diskarte:

“ querySelector() ” Pamamaraan
“ getElementbyId() ” Pamamaraan

Ang mga nabanggit na approach ay isa-isang ipapakita!

Paraan 1: I-detect ang Tab Key sa JavaScript Gamit ang document.querySelector() Method

Ang ' document.querySelector() Ang paraan ng ” ay nag-a-access sa unang elementong tumutugma sa isang CSS selector, at pagkatapos ay ang addEventListener() na paraan ay nagdaragdag ng event handler sa na-access na elemento. Maaaring ilapat ang mga pamamaraang ito upang ma-access ang uri ng input at makita kung pinindot ang tab key o hindi kapag ipinasok ang halaga nito.

Syntax

elemento. addEventListener ( kaganapan , function , gumamit ngCapture )

Sa ibinigay na syntax, ' kaganapan 'ay tumutukoy sa pangalan ng kaganapan,' function ” ay ang partikular na function na isasagawa kapag nangyari ang kaganapan, at “ gumamit ngCapture ” ay ang opsyonal na argumento.

dokumento. querySelector ( Mga tagapili ng CSS )

Sa syntax sa itaas, ' Mga tagapili ng CSS ” sumangguni sa isa o higit pang CSS selector na maaaring tukuyin sa document.querySelector() method.

Dumaan sa sumusunod na halimbawa para sa isang mas mahusay na pag-unawa sa nakasaad na konsepto.

Halimbawa
Una, tukuyin ang uri ng input bilang ' text ” na may paunang halaga ng placeholder at isang heading sa “ 'tag:

< input uri = 'text' placeholder = 'Ipasok ang Teksto' >
< h2 > Resulta < / h2 >

Susunod, ilapat ang ' document.querySelector() 'paraan para ma-access ang tinukoy na input at ang heading ayon sa pagkakabanggit at iimbak ang mga ito sa mga variable na pinangalanang ' input 'at' resulta ”:

hayaan ang input = dokumento. querySelector ( 'input' ) ;
hayaan ang resulta = dokumento. querySelector ( 'h2' ) ;

Ngayon, idagdag ang ' keydown ” event na may input field gamit ang addEventListener() method. Aabisuhan ng kaganapang ito ang user sa tuwing ' tab Ang ' key ay pinindot sa input field sa pamamagitan ng paglalapat ng sumusunod na kondisyon sa tulong ng ' innerText ” ari-arian:

input. addEventListener ( 'keydown' , ( at ) => {
kung ( at. susi === 'Tab' ) {
resulta. innerText = 'Pinindot ang Tab Key' ;
} iba pa {
resulta. innerText = 'Hindi Pinindot ang Tab Key' ;
}

Sa kasong ito, kapag pinindot ng user ang tab key, aabisuhan ang idinagdag tungkol sa ginawang pagkilos:

Paraan 2: I-detect ang Tab Key sa JavaScript Gamit ang document.getElementbyId() Method

Ang ' document.getElementById() ” paraan ay maaaring gamitin upang ma-access ang isang partikular na elemento ng HTML batay sa id nito. Maaaring ipatupad ang paraang ito para makuha ang input field at magdagdag ng event para alertuhan ang user sa tuwing pinindot ang partikular na key, gaya ng tab key.

Syntax

dokumento. getElementById ( mga elemento )

Sa ibinigay na syntax, ' mga elemento ” ay tumutukoy sa id ng isang tinukoy na elemento.

Tingnan natin ang sumusunod na halimbawa.

Halimbawa
Sa halimbawa sa ibaba, magsama ng uri ng input at value ng placeholder gaya ng tinalakay sa nakaraang paraan:

< input uri = 'text' id = 'tab' placeholder = 'Ipasok ang Teksto' >

Ngayon, kunin ang input field id gamit ang “ document.getElementById() ” paraan.

let input= document.getElementById(“tab”);

Panghuli, magdagdag ng kaganapan na pinangalanang ' keydown ” sa paraan ng addEventListener(), na mag-aalerto sa user sa tuwing ang “ Tab ” pinindot ang key:

input. addEventListener ( 'keydown' , ( at ) => {
kung ( at. susi === 'Tab' ) {
alerto ( 'Pinindot ang Tab Key' ) ;
}
} ) ;

Output

Napag-usapan na namin ang lahat ng pinakasimpleng paraan para makita ang tab key sa JavaScript.

Konklusyon

Para makita ang tab key sa JavaScript, gamitin ang “ addEventListener() ' kasama ang ' document.querySelector() 'paraan para sa pagkuha ng uri ng input at paglalapat ng isang kaganapan para sa pag-detect ng tinukoy na key o ang ' getElementbyId() ” paraan para sa pagkuha ng input field batay sa id nito at pag-abiso sa user kapag nasiyahan ang idinagdag na kundisyon. Ang blog na ito ay may gabay tungkol sa pag-detect ng tab key sa JavaScript.

Paano Matukoy ang Tab Key sa JavaScript