Syntaks
element. fokus = fungere ( ) { myScript } ;
I ovenstående syntaks:
- element: Det repræsenterer HTML-elementet.
- fungere(): Det refererer til den funktion, der skal aktiveres ved hændelsesudløseren.
- myScript: Det svarer til funktionsdefinitionen at udføre den specifikke opgave, når 'fokus'-hændelsen opstår.
Hvordan bruger man en 'fokusbegivenhed' i JavaScript?
Det ' fokus ” begivenhed kan bruges på forskellige måder i JavaScript. Dette afsnit udfører forskellige taktiske eksempler for at illustrere dets brug.
Eksempel 1: Udløsning af “ fokus begivenhed ” ved at ændre inputfeltets baggrundsfarve
Dette eksempel udløser ' fokus ” hændelse ved at ændre baggrundsfarven i inputtekstfeltet ved hjælp af en brugerdefineret JavaScript-funktion.
HTML kode
For det første oversigt over følgende HTML-kode:
< h2 > fokus Begivenhed I JavaScript h2 >
< s > Klik inde i inputfeltet for at få fokus ( fokus ) . s >
Navn : < input type = 'tekst' id = 'demo' pladsholder = 'Indtast dit navn' fokus = 'func()' >
I ovenstående kode:
- Det ' ' tag definerer underoverskriften og ' ” tag opretter et afsnit, hhv.
- Derefter vil ' ' tag, der repræsenterer input tekstfeltet, er mærket ' Navn ', indholdstype som ' tekst ', tilknyttet id som ' demo ”, og den angivne pladsholder.
- Også ' fokus ” hændelse er angivet for at omdirigere til funktionen med navnet ” func() ”.
JavaScript kode
Gå derefter igennem den nedenfor angivne JavaScript-kode:
< manuskript >funktion func ( ) {
dokument. getElementById ( 'demo' ) . stil . baggrund = 'lyserød' ;
}
manuskript >
I ovenstående kodelinjer:
- En funktion ved navn ' func() ” er defineret.
- I funktionsdefinitionen er ' document.getElementById() '-metoden henter afsnittet via dets id og anvender ' stil.baggrund ” ejendom.
- Det er sådan, at baggrundsfarven på inputtekstfeltet ændres ved hændelsen, dvs. 'fokus'-udløseren.
Produktion
Udgangen bekræfter, at når ' fokus ” hændelsesudløser, ændres baggrundsfarven for det givne inputfelt tilsvarende.
Eksempel 2: Udløsning af “ fokus begivenhed ” Via alarmboks
I dette eksempel kan en advarselsboks vises ved hændelsen, dvs. ' fokus ” trigger via en brugerdefineret funktion.
HTML kode
Først skal du tage et kig på følgende HTML-kode:
< h2 > fokus Begivenhed I JavaScript h2 >< s > Klik inde fra inputfeltet for at få fokus ( fokus ) . s >
Navn : < input type = 'tekst' id = 'pass1' pladsholder = 'Indtast dit navn' >
I ovenstående HTML-kodeblok:
- Tilføj ligeledes en underoverskrift på niveau 2 via ' ' tag og medtag et afsnit ved hjælp af ' ” tag.
- På samme måde defineres et inputfelt via henholdsvis den angivne etiket, indholdstype, id og pladsholder.
JavaScript kode
Overvej nu følgende JavaScript-kode:
< manuskript >dokument. getElementById ( 'pass1' ) . fokus = fungere ( ) { demo ( ) } ;
funktionsdemo ( ) {
alert ( 'Inputfelt bliver fokuseret.' ) ;
}
manuskript >
I ovenstående kodestykke:
- Det ' document.getElementById() ”-metoden henter inputfeltet via dets id og knytter hændelsen, dvs. fokus ' med det.
- Det er sådan, at JavaScript-funktionen ' demo() ' bliver påkaldt ved hændelsesudløseren og viser ' alert ” boks med den angivne besked.
Produktion
I dette output kan det observeres, at når musen klikker inde i inputfeltet, bliver elementet fokuseret, og så dukker 'alarm'-boksen op med den angivne besked.
Konklusion
JavaScript tilbyder ' fokus ” hændelse, der udløses, når det tilknyttede HTML-element bevæger sig inde i det, dvs. får fokus. Det er det omvendte af ' onblur ” begivenhed, der udløses, når elementet mister fokus. Den kan bruges til at aktivere JavaScript-funktionen til at udføre den ønskede opgave, når den udløses. Denne vejledning demonstrerede formålet, virkemåden og brugen af 'onfocus'-hændelsen i JavaScript.