Syntaks
element. fokus = funksjon ( ) { myScript } ;
I syntaksen ovenfor:
- element: Det representerer HTML-elementet.
- funksjon(): Det refererer til funksjonen som må påkalles ved hendelsesutløseren.
- myScript: Det tilsvarer funksjonsdefinisjonen å utføre den spesifikke oppgaven når 'fokus'-hendelsen inntreffer.
Hvordan bruke en 'fokushendelse' i JavaScript?
« fokus ”-hendelse kan brukes på forskjellige måter i JavaScript. Denne delen utfører ulike taktiske eksempler for å illustrere bruken.
Eksempel 1: Utløsing av ' onfocus hendelse ” ved å endre bakgrunnsfargen for inputfeltet
Dette eksemplet utløser ' fokus ”-hendelse ved å endre bakgrunnsfargen for tekstfeltet ved hjelp av en brukerdefinert JavaScript-funksjon.
HTML-kode
Først en oversikt over følgende HTML-kode:
< h2 > fokus Begivenhet I JavaScript h2 >
< s > Klikk inne i inndatafeltet for å få fokus ( fokus ) . s >
Navn : < inndatatype = 'tekst' id = 'demo' plassholder = 'Skriv inn navnet ditt' fokus = 'func()' >
I koden ovenfor:
- « '-taggen definerer underoverskriften og ' ”-taggen oppretter henholdsvis et avsnitt.
- Etter det, ' '-taggen som representerer inndatatekstfeltet er merket ' Navn ', innholdstype som ' tekst ', tilknyttet ID som ' demo ”, og den oppgitte plassholderen.
- Også ' fokus '-hendelsen er spesifisert for å omdirigere til funksjonen kalt ' func() '.
JavaScript-kode
Gå deretter gjennom JavaScript-koden nedenfor:
< manus >funksjon funksjon ( ) {
dokument. getElementById ( 'demo' ) . stil . bakgrunn = 'rosa' ;
}
manus >
I kodelinjene ovenfor:
- En funksjon kalt ' func() ' er definert.
- I funksjonsdefinisjonen er ' document.getElementById() '-metoden henter avsnittet via id-en og bruker ' stil.bakgrunn ' eiendom.
- Det er slik at bakgrunnsfargen til inndatatekstfeltet endres ved hendelsen, dvs. 'fokus'-utløseren.
Produksjon
Utgangen bekrefter at når ' fokus ”-hendelsen utløses, endres bakgrunnsfargen til det gitte inndatafeltet tilsvarende.
Eksempel 2: Utløsing av ' onfocus hendelse ” Via varslingsboks
I dette eksemplet kan en varselboks vises ved hendelsen, dvs. ' fokus ” trigger via en brukerdefinert funksjon.
HTML-kode
Ta først en titt på følgende HTML-kode:
< h2 > fokus Begivenhet I JavaScript h2 >< s > Klikk inni fra inndatafeltet for å få fokus ( fokus ) . s >
Navn : < inndatatype = 'tekst' id = 'pass1' plassholder = 'Skriv inn navnet ditt' >
I HTML-kodeblokken ovenfor:
- På samme måte, legg til en underoverskrift på nivå 2 via ' '-taggen og ta med et avsnitt ved å bruke ' ' stikkord.
- På samme måte er et inndatafelt definert via henholdsvis den angitte etiketten, innholdstypen, id og plassholder.
JavaScript-kode
Tenk nå på følgende JavaScript-kode:
< manus >dokument. getElementById ( 'pass1' ) . fokus = funksjon ( ) { demo ( ) } ;
funksjonsdemo ( ) {
varsling ( 'Inndatafelt blir fokusert.' ) ;
}
manus >
I kodebiten ovenfor:
- « document.getElementById() ”-metoden henter inndatafeltet via id-en og assosierer hendelsen, dvs. fokus ' med det.
- Det er slik at JavaScript-funksjonen ' demo() ' blir påkalt ved hendelsestriggeren og viser ' varsling ”-boksen med den oppgitte meldingen.
Produksjon
I denne utgangen kan det observeres at når musen klikker inne i inndatafeltet, blir elementet fokusert, og så dukker 'varslings'-boksen opp og viser den angitte meldingen.
Konklusjon
JavaScript tilbyr ' fokus ”-hendelse som utløses når det tilknyttede HTML-elementet beveger seg inne i det, dvs. får fokus. Det er det motsatte av ' onblur ” hendelse som utløses når elementet mister fokus. Den kan brukes til å påkalle JavaScript-funksjonen for å utføre ønsket oppgave når den utløses. Denne veiledningen demonstrerte formålet, virkemåten og bruken av 'onfocus'-hendelsen i JavaScript.