Šis raksts palīdzēs jums noteikt tabulēšanas taustiņu JavaScript.
Kā noteikt tabulēšanas taustiņu JavaScript?
Lai noteiktu tabulēšanas taustiņu JavaScript, izmantojiet šādas metodes:
- ' querySelector() ” Metode
- ' getElementbyId() ” Metode
Minētās pieejas tiks demonstrētas pa vienai!
1. metode: nosakiet tabulēšanas taustiņu JavaScript, izmantojot metodi document.querySelector().
' document.querySelector() ” metode piekļūst pirmajam elementam, kas atbilst CSS atlasītājam, un pēc tam metode addEventListener() pievieno notikumu apstrādātāju elementam, kuram piekļūts. Šīs metodes var izmantot, lai piekļūtu ievades veidam un noteiktu, vai tabulēšanas taustiņš ir nospiests, ievadot tā vērtību.
Sintakse
elements. addEventListener ( notikumu , funkciju , useCapture )
Dotajā sintaksē ' notikumu ' attiecas uz notikuma nosaukumu, ' funkciju ” ir īpaša funkcija, kas jāizpilda, kad notiek notikums, un useCapture ” ir izvēles arguments.
dokumentu. querySelector ( CSS atlasītāji )Iepriekš minētajā sintaksē ' CSS atlasītāji ” attiecas uz vienu vai vairākiem CSS atlasītājiem, kurus var norādīt document.querySelector() metodē.
Izlasiet šo piemēru, lai labāk izprastu norādīto jēdzienu.
Piemērs
Pirmkārt, norādiet ievades veidu kā ' tekstu ' ar sākotnējo viettura vērtību un virsrakstu sadaļā '
< h2 > Rezultāts < / h2 >
Pēc tam izmantojiet “ document.querySelector() ' metode, lai piekļūtu norādītajai ievadei un attiecīgi virsrakstam un saglabātu tos mainīgajos ar nosaukumu ' ievade ' un ' rezultāts ”:
ļauj ievadīt = dokumentu. querySelector ( 'ievade' ) ;ļaujiet rezultātu = dokumentu. querySelector ( 'h2' ) ;
Tagad pievienojiet ' taustiņu noslēgšana ” notikumu ar ievades lauku, izmantojot metodi addEventListener(). Šis notikums informēs lietotāju ikreiz, kad “ cilne ' taustiņš tiek nospiests ievades laukā, piemērojot šādu nosacījumu ar ' iekšējaisTeksts ” īpašums:
ievade. addEventListener ( 'taustiņu noslēgšana' , ( un ) => {ja ( un. taustiņu === 'Cilne' ) {
rezultāts. iekšējaisTeksts = 'Nospiests tabulēšanas taustiņš' ;
} cits {
rezultāts. iekšējaisTeksts = 'Tab nav nospiests' ;
}
Šādā gadījumā, lietotājam nospiežot tabulēšanas taustiņu, pievienotais paziņos par veikto darbību:
2. metode: nosakiet tabulēšanas taustiņu JavaScript, izmantojot metodi document.getElementbyId()
' document.getElementById() ” metodi var izmantot, lai piekļūtu konkrētam HTML elementam, pamatojoties uz tā ID. Šo metodi var ieviest, lai iegūtu ievades lauku un pievienotu notikumu, lai brīdinātu lietotāju, kad tiek nospiests konkrētais taustiņš, piemēram, tabulēšanas taustiņš.
Sintakse
dokumentu. getElementById ( elementi )Dotajā sintaksē ' elementi ” attiecas uz noteikta elementa ID.
Apskatīsim tālāk sniegto piemēru.
Piemērs
Tālāk esošajā piemērā iekļaujiet ievades veidu un viettura vērtību, kā aprakstīts iepriekšējā metodē:
Tagad iegūstiet ievades lauka ID, izmantojot “ document.getElementById() ” metode.
let input= document.getElementById('tab');
Visbeidzot pievienojiet notikumu ar nosaukumu ' taustiņu noslēgšana ”, izmantojot metodi addEventListener(), kas brīdinās lietotāju ikreiz, kad Tab ” tiek nospiests taustiņš:
ievade. addEventListener ( 'taustiņu noslēgšana' , ( un ) => {ja ( un. taustiņu === 'Cilne' ) {
brīdinājums ( 'Nospiests tabulēšanas taustiņš' ) ;
}
} ) ;
Izvade
Mēs esam apsprieduši visas vienkāršākās metodes, kā noteikt tabulēšanas taustiņu JavaScript.
Secinājums
Lai noteiktu tabulēšanas taustiņu JavaScript, izmantojiet addEventListener() ' Ar ' document.querySelector() ” metode, lai iegūtu ievades veidu un piemērotu notikumu norādītās atslēgas noteikšanai vai “ getElementbyId() ” metode ievades lauka iegūšanai, pamatojoties uz tā ID, un informēt lietotāju, kad pievienotais nosacījums ir izpildīts. Šis emuārs sniedz norādījumus par tabulēšanas atslēgas noteikšanu JavaScript.