Szintaxis
elem. onfókusz = funkció ( ) { myScript } ;
A fenti szintaxisban:
- elem: Ez a HTML elemet képviseli.
- funkció(): Arra a funkcióra utal, amelyet az eseményindítónál meg kell hívni.
- myScript: A funkciódefiníciónak megfelel az adott feladat végrehajtása, amikor az „onfocus” esemény bekövetkezik.
Hogyan használjunk „onfocus eseményt” a JavaScriptben?
A ' onfókusz ” esemény többféleképpen használható a JavaScriptben. Ez a rész különféle taktikai példákkal illusztrálja a használatát.
1. példa: A ' onfocus esemény ” a beviteli mező háttérszínének megváltoztatásával
Ez a példa elindítja a „ onfókusz ” eseményt a beviteli szövegmező háttérszínének megváltoztatásával egy felhasználó által definiált JavaScript függvény segítségével.
HTML kód
Először a következő HTML-kód áttekintése:
< h2 > onfókusz Esemény JavaScriptben h2 >
< p > A fókusz beállításához kattintson a beviteli mező belsejére ( onfókusz ) . p >
Név : < beviteli típus = 'szöveg' id = 'demó' helykitöltő = 'Adja meg nevét' onfókusz = 'func()' >
A fenti kódban:
- A ' ' címke határozza meg az alcímet és a ' ” címke egy bekezdést hoz létre, ill.
- Ezt követően a „
' a beviteli szövegmezőt képviselő ' címke ' feliratú Név ”, tartalomtípus mint „ szöveg ”, társított azonosító: „ demó ” és a megadott helyőrző. - Továbbá a „ onfókusz ' esemény van megadva, hogy átirányítsa a ' nevű függvényre func() ”.
JavaScript kód
Ezután menjen át az alább megadott JavaScript kódon:
< forgatókönyv >funkció func ( ) {
dokumentum. getElementById ( 'demó' ) . stílus . háttér = 'rózsaszín' ;
}
forgatókönyv >
A fenti kódsorokban:
- Egy '' nevű függvény func() ” van meghatározva.
- A függvénydefinícióban a „ document.getElementById() ' metódus lekéri a bekezdést az azonosítóján keresztül, és alkalmazza a ' stílus.háttér ' ingatlan.
- Ez olyan, hogy a beviteli szövegmező háttérszíne megváltozik az esemény, azaz az „onfocus” trigger hatására.
Kimenet
A kimenet megerősíti, hogy amikor a „ onfókusz ” esemény triggerek hatására az adott beviteli mező háttérszíne ennek megfelelően változik.
2. példa: A ' onfocus esemény ” Alert Boxon keresztül
Ebben a példában egy figyelmeztető mező jeleníthető meg az eseménynél, azaz: ' onfókusz ” trigger egy felhasználó által definiált funkción keresztül.
HTML kód
Először nézze meg a következő HTML-kódot:
< h2 > onfókusz Esemény JavaScriptben h2 >< p > A fókusz beállításához kattintson a beviteli mező belsejére ( onfókusz ) . p >
Név : < beviteli típus = 'szöveg' id = 'pass1' helykitöltő = 'Adja meg nevét' >
A fenti HTML kódblokkban:
- Hasonlóképpen adjon hozzá egy 2. szintű alcímet a „ ” címkét, és tartalmazzon egy bekezdést a „ ” címke.
- Hasonlóképpen, egy beviteli mezőt a megadott címke, tartalomtípus, azonosító és helyőrző határozza meg.
JavaScript kód
Most fontolja meg a következő JavaScript-kódot:
< forgatókönyv >dokumentum. getElementById ( 'pass1' ) . onfókusz = funkció ( ) { demó ( ) } ;
funkció demo ( ) {
éber ( 'A beviteli mező fókuszáljon.' ) ;
}
forgatókönyv >
A fenti kódrészletben:
- A ' document.getElementById() ” metódus lekéri a beviteli mezőt az azonosítóján keresztül, és társítja az eseményt, azaz: „ onfókusz ' ezzel.
- Ez olyan, hogy a JavaScript függvény ' demó() ' az eseményindító hatására meghívódik, és megjelenik a ' éber ” mezőbe a megadott üzenetet.
Kimenet
Ezen a kimeneten megfigyelhető, hogy amikor az egér kattintással a beviteli mezőbe kerül, az elem fókuszba kerül, így megjelenik a „figyelmeztető” mező, amely megjeleníti a megadott üzenetet.
Következtetés
A JavaScript kínálja a ' onfókusz ” esemény, amely akkor indul el, amikor a társított HTML-elem elmozdul benne, azaz fókuszba kerül. Ez a fordítottja a ' onblur ” esemény, amely akkor aktiválódik, amikor az elem elveszíti a fókuszt. Használható a JavaScript függvény meghívására a kívánt feladat végrehajtásához, amikor aktiválódik. Ez az útmutató bemutatja az „onfocus” esemény célját, működését és használatát JavaScriptben.