Sintaxă
element. onfocus = funcţie ( ) { myScript } ;
În sintaxa de mai sus:
- element: Reprezintă elementul HTML.
- funcţie(): Se referă la funcția care trebuie invocată la declanșarea evenimentului.
- myScript: Corespunde definiției funcției de a efectua sarcina specifică atunci când are loc evenimentul „onfocus”.
Cum să utilizați un „eveniment onfocus” în JavaScript?
„ onfocus ” evenimentul poate fi utilizat în diferite moduri în JavaScript. Această secțiune realizează diverse exemple tactice pentru a ilustra utilizarea sa.
Exemplul 1: Declanșarea „ Eveniment onfocus ” prin schimbarea culorii de fundal a câmpului de intrare
Acest exemplu declanșează „ onfocus ” eveniment prin schimbarea culorii de fundal a câmpului text de intrare cu ajutorul unei funcții JavaScript definite de utilizator.
Cod HTML
În primul rând, prezentare generală a următorului cod HTML:
< h2 > onfocus Eveniment În JavaScript h2 >
< p > Faceți clic în interiorul câmpului de introducere pentru a obține focalizarea ( onfocus ) . p >
Nume : < tip de introducere = 'text' id = 'demo' substituent = 'Introdu numele tau' onfocus = 'func()' >
În codul de mai sus:
- „ Eticheta ” definește subtitlul și ” ” eticheta creează un paragraf, respectiv.
- După aceea, „ „eticheta care reprezintă câmpul de text de intrare este etichetată „ Nume ”, tip de conținut ca „ text ”, id asociat ca „ demonstrație ”, și substituentul declarat.
- De asemenea ' onfocus ” evenimentul este specificat pentru a redirecționa către funcția numită “ func() ”.
Cod JavaScript
Apoi, parcurgeți codul JavaScript furnizat mai jos:
< scenariu >funcția func ( ) {
document. getElementById ( 'demo' ) . stil . fundal = 'roz' ;
}
scenariu >
În rândurile de cod de mai sus:
- O funcție numită „ func() ' este definit.
- În definiția funcției, „ document.getElementById() ” metoda preia paragraful prin id-ul său și aplică „ stil.fond ” proprietate.
- Este de așa natură încât culoarea de fundal a câmpului de text de intrare se schimbă la eveniment, adică declanșarea „onfocus”.
Ieșire
Ieșirea confirmă că atunci când „ onfocus ” declanșează evenimentul, culoarea de fundal a câmpului de intrare dat se schimbă în consecință.
Exemplul 2: Declanșarea „ Eveniment onfocus ” Prin Alert Box
În acest exemplu, o casetă de alertă poate fi afișată la eveniment și anume „ onfocus ” declanșează printr-o funcție definită de utilizator.
Cod HTML
Mai întâi, aruncați o privire la următorul cod HTML:
< h2 > onfocus Eveniment În JavaScript h2 >< p > Faceți clic în interior din câmpul de introducere pentru a obține focalizarea ( onfocus ) . p >
Nume : < tip de introducere = 'text' id = 'trece1' substituent = 'Introdu numele tau' >
În blocul de cod HTML de mai sus:
- De asemenea, adăugați un subtitlu de nivelul 2 prin intermediul „ ” etichetați și includeți un paragraf folosind „ ' etichetă.
- În mod similar, un câmp de intrare este definit prin intermediul etichetei, tipului de conținut, id-ului și, respectiv, substituent.
Cod JavaScript
Acum, luați în considerare următorul cod JavaScript:
< scenariu >document. getElementById ( 'trece1' ) . onfocus = funcţie ( ) { demonstrație ( ) } ;
demonstrație a funcției ( ) {
alerta ( „Câmpul de intrare se concentrează”. ) ;
}
scenariu >
În fragmentul de cod de mai sus:
- „ document.getElementById() ” metoda preia câmpul de intrare prin id-ul său și asociază evenimentul, de exemplu, „ onfocus ' Cu acesta.
- Este de așa natură încât funcția JavaScript „ demonstrație() ” devine invocat la declanșarea evenimentului și afișează „ alerta ” caseta cu mesajul declarat.
Ieșire
În această ieșire, se poate observa că atunci când mouse-ul face clic în interiorul câmpului de intrare, elementul devine focalizat și astfel apare caseta de „alertă” care afișează mesajul declarat.
Concluzie
JavaScript oferă „ onfocus ” eveniment care este declanșat atunci când elementul HTML asociat se mișcă în interiorul acestuia, adică devine focalizat. Este inversul „ onblur ” eveniment care se declanșează atunci când elementul își pierde focalizarea. Poate fi folosit pentru a invoca funcția JavaScript pentru a îndeplini sarcina dorită la declanșare. Acest ghid a demonstrat scopul, funcționarea și utilizarea evenimentului „onfocus” în JavaScript.