See kirjeldus aitab teil JavaScriptis tabeldusklahvi tuvastada.
Kuidas tuvastada tabeldusklahvi JavaScriptis?
Tabeldusklahvi tuvastamiseks JavaScriptis kasutage järgmisi tehnikaid.
- “ querySelector() ” Meetod
- “ getElementbyId() ” Meetod
Mainitud lähenemisi demonstreeritakse ükshaaval!
1. meetod: tuvastage JavaScriptis tabeldusvõti, kasutades meetodit document.querySelector().
' document.querySelector() ” meetod pääseb juurde esimesele elemendile, mis vastab CSS-i valijale, ja seejärel lisab meetod addEventListener() juurdepääsetavale elemendile sündmuste käitleja. Neid meetodeid saab kasutada sisendtüübile juurdepääsuks ja tuvastamiseks, kas tabeldusklahvi vajutatakse selle väärtuse sisestamisel või mitte.
Süntaks
element. addEventListener ( sündmus , funktsiooni , useCapture )
Antud süntaksis ' sündmus ' viitab sündmuse nimele, ' funktsiooni ” on konkreetne funktsioon, mida sündmuse toimumisel käivitatakse ja „ useCapture ” on valikuline argument.
dokument. querySelector ( CSS-i valijad )Ülaltoodud süntaksis ' CSS-i valijad ” viitavad ühele või mitmele CSS-valijale, mida saab määrata meetodis document.querySelector().
Esitatud kontseptsiooni paremaks mõistmiseks vaadake läbi järgmine näide.
Näide
Esmalt määrake sisendi tüüp kui ' tekst ' algse kohahoidja väärtusega ja pealkirjaga '
< h2 > Tulemus < / h2 >
Järgmisena rakendage ' document.querySelector() ' meetod, et pääseda juurde vastavalt määratud sisendile ja pealkirjale ning salvestada need muutujatesse nimega ' sisend ” ja „ tulemus ”:
lase sisestada = dokument. querySelector ( 'sisend' ) ;lase tulemuseks = dokument. querySelector ( 'h2' ) ;
Nüüd lisage ' klahvi alla ” sündmus sisestusväljaga, kasutades meetodit addEventListener(). See sündmus teavitab kasutajat alati, kui sakk klahvi ” vajutatakse sisestusväljal, rakendades klahvi “ abil järgmist tingimust sisemine Tekst ” vara:
sisend. addEventListener ( 'klahvi alla' , ( ja ) => {kui ( ja. võti === 'Tab' ) {
tulemus. sisemine Tekst = 'Tab-klahvi vajutatud' ;
} muidu {
tulemus. sisemine Tekst = 'Tab-klahvi pole vajutatud' ;
}
Sel juhul, kui kasutaja vajutab tabeldusklahvi, teavitab lisatud tehtud toimingust:
2. meetod: tuvastage JavaScriptis tabeldusvõti, kasutades meetodit document.getElementbyId()
' document.getElementById() ” meetodit saab kasutada konkreetsele HTML-elemendile juurdepääsuks selle ID alusel. Seda meetodit saab rakendada sisestusvälja hankimiseks ja sündmuse lisamiseks, mis hoiatab kasutajat iga kord, kui konkreetset klahvi (nt tabeldusklahvi) vajutatakse.
Süntaks
dokument. getElementById ( elementID )Antud süntaksis ' elementID ” viitab määratud elemendi ID-le.
Teeme ülevaate järgmisest näitest.
Näide
Kaasake allolevas näites sisendi tüüp ja kohahoidja väärtus, nagu on kirjeldatud eelmises meetodis:
Nüüd tooge sisestusvälja ID, kasutades ' document.getElementById() ” meetod.
let input= document.getElementById('tab');
Lõpuks lisage sündmus nimega ' klahvi alla ” meetodis addEventListener(), mis annab kasutajale märku alati, kui Tab ” klahvi vajutatakse:
sisend. addEventListener ( 'klahvi alla' , ( ja ) => {kui ( ja. võti === 'Tab' ) {
hoiatus ( 'Tab-klahvi vajutatud' ) ;
}
} ) ;
Väljund
Oleme arutanud kõiki lihtsamaid meetodeid tabeldusklahvi tuvastamiseks JavaScriptis.
Järeldus
Tabeldusklahvi tuvastamiseks JavaScriptis kasutage ' addEventListener() ' koos ' document.querySelector() ” meetod sisenditüübi hankimiseks ja sündmuse rakendamiseks määratud võtme tuvastamiseks või getElementbyId() ” meetod sisestusvälja toomiseks selle ID alusel ja kasutaja teavitamiseks alati, kui lisatud tingimus on täidetud. See ajaveeb juhendab tabeldusklahvi tuvastamist JavaScriptis.