Syntax
element. fokus = fungera ( ) { myScript } ;
I ovanstående syntax:
- element: Det representerar HTML-elementet.
- fungera(): Det hänvisar till funktionen som måste anropas vid händelseutlösaren.
- myScript: Det motsvarar funktionsdefinitionen att utföra den specifika uppgiften när 'onfocus'-händelsen inträffar.
Hur använder man en 'fokushändelse' i JavaScript?
den ' fokus ”-händelsen kan användas på olika sätt i JavaScript. Detta avsnitt utför olika taktiska exempel för att illustrera dess användning.
Exempel 1: Att trigga ' onfocus händelse ” genom att ändra inmatningsfältets bakgrundsfärg
Detta exempel utlöser ' fokus ” genom att ändra bakgrundsfärgen för inmatningstextfältet med hjälp av en användardefinierad JavaScript-funktion.
HTML-kod
Först, översikt över följande HTML-kod:
< h2 > fokus Händelse I JavaScript h2 >
< sid > Klicka i inmatningsfältet för att få fokus ( fokus ) . sid >
namn : < ingångstyp = 'text' id = 'demo' Platshållare = 'Ange ditt namn' fokus = 'func()' >
I ovanstående kod:
- den ' '-taggen definierar underrubriken och ' ”-taggen skapar ett stycke.
- Efter det kommer '
' taggen som representerar inmatningstextfältet är märkt ' namn ', innehållstyp som ' text ', kopplat id som ' demo ”, och den angivna platshållaren. - Även ' fokus ' händelse specificeras för att omdirigera till funktionen med namnet ' func() ”.
JavaScript-kod
Gå sedan igenom nedanstående JavaScript-kod:
< manus >funktion func ( ) {
dokumentera. getElementById ( 'demo' ) . stil . bakgrund = 'rosa' ;
}
manus >
I kodraderna ovan:
- En funktion som heter ' func() ' är definierad.
- I funktionsdefinitionen är ' document.getElementById() ”-metoden hämtar stycket via dess id och tillämpar ” stil.bakgrund ' fast egendom.
- Det är sådan att bakgrundsfärgen på inmatningstextfältet ändras vid händelsen, dvs. 'fokusering'-utlösaren.
Produktion
Utgången bekräftar att när ' fokus ” händelseutlöser ändras bakgrundsfärgen för det givna inmatningsfältet därefter.
Exempel 2: Att trigga ' onfocus händelse ” Via Alert Box
I det här exemplet kan en varningsruta visas vid händelsen, dvs. fokus ” trigger via en användardefinierad funktion.
HTML-kod
Ta först en titt på följande HTML-kod:
< h2 > fokus Händelse I JavaScript h2 >< sid > Klicka inuti från inmatningsfältet för att få fokus ( fokus ) . sid >
namn : < ingångstyp = 'text' id = 'pass1' Platshållare = 'Ange ditt namn' >
I HTML-kodblocket ovan:
- Lägg på samma sätt till en underrubrik för nivå 2 via ' ' taggen och inkludera ett stycke med ' '-tagg.
- På liknande sätt definieras ett inmatningsfält via angiven etikett, innehållstyp, id respektive platshållare.
JavaScript-kod
Tänk nu på följande JavaScript-kod:
< manus >dokumentera. getElementById ( 'pass1' ) . fokus = fungera ( ) { demo ( ) } ;
funktionsdemo ( ) {
varna ( 'Inmatningsfältet fokuseras.' ) ;
}
manus >
I kodavsnittet ovan:
- den ' document.getElementById() ”-metoden hämtar inmatningsfältet via dess id och associerar händelsen, dvs. fokus ' med det.
- Det är så att JavaScript-funktionen ' demo() ' anropas vid händelseutlösaren och visar ' varna ” ruta med det angivna meddelandet.
Produktion
I denna utgång kan det observeras att när musen klickar inuti inmatningsfältet, fokuseras elementet och så 'varningsrutan' dyker upp och visar det angivna meddelandet.
Slutsats
JavaScript erbjuder ' fokus ”-händelse som utlöses när det associerade HTML-elementet flyttas inuti det, dvs får fokus. Det är motsatsen till ' på oskärpa ” händelse som utlöses när elementet tappar fokus. Den kan användas för att anropa JavaScript-funktionen för att utföra önskad uppgift när den utlöses. Den här guiden visade syftet, funktionen och användningen av 'onfocus'-händelsen i JavaScript.