Kaip aptikti skirtuko klavišą „JavaScript“.

Dažnai susiduriame su svetainėmis arba tinklalapiais, kuriuose yra didžiosios ir mažosios raidės. Be to, kai kurie tinklalapiai neleidžia įvesti duomenų tol, kol yra paspaustas konkretus klavišas, pvz., didžiųjų raidžių klavišas, ypač slaptažodžių atveju. Tokiais atvejais tabuliavimo klavišo aptikimas „JavaScript“ yra labai naudingas, norint iš anksto įspėti vartotoją apie įvestus duomenis.

Šis užrašas padės jums aptikti tabuliavimo klavišą „JavaScript“.

Kaip aptikti skirtuko klavišą „JavaScript“?

Norėdami aptikti tabuliavimo klavišą „JavaScript“, taikykite šiuos metodus:

“ querySelector() “ metodas
“ getElementbyId() “ metodas

Minėti metodai bus demonstruojami po vieną!

1 būdas: aptikti tabuliavimo klavišą „JavaScript“ naudojant document.querySelector() metodą

„ document.querySelector() “ metodas pasiekia pirmąjį elementą, atitinkantį CSS parinkiklį, o tada metodas addEventListener() prideda įvykių tvarkyklę prie pasiekiamo elemento. Šie metodai gali būti taikomi norint pasiekti įvesties tipą ir nustatyti, ar tabuliavimo klavišas paspaustas, ar ne, kai įvedama jo reikšmė.

Sintaksė

elementas. addEventListener ( įvykis , funkcija , useCapture )

Pateiktoje sintaksėje „ įvykis “ nurodo įvykio pavadinimą, “ funkcija “ yra konkreti funkcija, kurią reikia vykdyti, kai įvyksta įvykis, ir „ useCapture “ yra neprivalomas argumentas.

dokumentas. querySelector ( CSS parinkikliai )

Aukščiau pateiktoje sintaksėje „ CSS parinkikliai “ nurodo vieną ar kelis CSS parinkiklius, kuriuos galima nurodyti document.querySelector() metodu.

Norėdami geriau suprasti pateiktą sąvoką, peržiūrėkite šį pavyzdį.

Pavyzdys
Pirmiausia nurodykite įvesties tipą kaip „ tekstą “ su pradine rezervuotos vietos reikšme ir antrašte „ “ žyma:

< įvestis tipo = 'tekstas' vietos rezervuaras = 'Įveskite tekstą' >
< h2 > Rezultatas < / h2 >

Tada pritaikykite „ document.querySelector() “ būdas pasiekti nurodytą įvestį ir atitinkamai antraštę ir išsaugoti juos kintamuosiuose pavadinimu “ įvestis “ ir „ rezultatas “:

leiskite įvesti = dokumentas. querySelector ( 'įvestis' ) ;
tegul rezultatas = dokumentas. querySelector ( 'h2' ) ;

Dabar pridėkite „ klavišų paspaudimas ” įvykis su įvesties lauku naudojant addEventListener() metodą. Šis įvykis informuos vartotoją, kai „ skirtuką “ klavišas paspaudžiamas įvesties lauke, taikant šią sąlygą naudojant „ vidinisTekstas ' nuosavybė:

įvestis. addEventListener ( 'keydown' , ( ir ) => {
jeigu ( ir. Raktas === 'skirtukas' ) {
rezultatas. vidinisTekstas = 'Tab klavišas paspaustas' ;
} Kitas {
rezultatas. vidinisTekstas = 'Tab klavišas nepaspaustas' ;
}

Tokiu atveju, kai vartotojas paspaus tabuliavimo klavišą, pridėtasis praneš apie atliktą veiksmą:

2 būdas: aptikti tabuliavimo klavišą „JavaScript“ naudojant document.getElementbyId() metodą

„ document.getElementById() “ metodas gali būti naudojamas norint pasiekti tam tikrą HTML elementą pagal jo ID. Šis metodas gali būti įgyvendintas norint gauti įvesties lauką ir pridėti įvykį, įspėjantį vartotoją, kai paspaudžiamas konkretus klavišas, pvz., tabuliavimo klavišas.

Sintaksė

dokumentas. getElementById ( elementai )

Pateiktoje sintaksėje „ elementai “ nurodo nurodyto elemento ID.

Apžvelkime toliau pateiktą pavyzdį.

Pavyzdys
Toliau pateiktame pavyzdyje įtraukite įvesties tipą ir rezervuotos vietos reikšmę, kaip aptarta ankstesniame metode:

< įvestis tipo = 'tekstas' id = 'skirtukas' vietos rezervuaras = 'Įveskite tekstą' >

Dabar gaukite įvesties lauko ID naudodami „ document.getElementById() “ metodas.

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

Galiausiai pridėkite įvykį pavadinimu „ klavišų paspaudimas “ metodu addEventListener(), kuris įspės vartotoją, kai „ Skirtukas “ paspaudžiamas klavišas:

įvestis. addEventListener ( 'keydown' , ( ir ) => {
jeigu ( ir. Raktas === 'skirtukas' ) {
budrus ( 'Tab klavišas paspaustas' ) ;
}
} ) ;

Išvestis

Aptarėme visus paprasčiausius būdus, kaip aptikti tabuliavimo klavišą „JavaScript“.

Išvada

Norėdami aptikti tabuliavimo klavišą „JavaScript“, naudokite „ addEventListener() ' su ' document.querySelector() “ būdas gauti įvesties tipą ir pritaikyti įvykį nurodytam raktui aptikti arba „ getElementbyId() “ metodas, skirtas gauti įvesties lauką pagal jo ID ir pranešti vartotojui, kai įvykdoma pridėta sąlyga. Šiame tinklaraštyje pateikiami nurodymai, kaip aptikti tabuliavimo klavišą „JavaScript“.

Kaip aptikti skirtuko klavišą „JavaScript“.