onfocusin-tapahtuma
Määritelmä ja käyttö
onfocusin-tapahtuma tapahtuu, kun elementti saavuttaa fokuksen.
Vaikka Firefox ei tue onfocusin-tapahtumaa, voit määrittää elementin alielementin fokukseen käyttämällä onfocus-tapahtuman käsittelyä (addEventListener()-metodin valinnainen useCapture-parametri).onfocusin-tapahtuma on samanlainen kuin onfocus tapahtumaPääasiallinen ero on, että onfocus-tapahtuma ei bubble.
Vaikka Firefox ei tue onfocusin-tapahtumaa, voit määrittää elementin alielementin fokukseen käyttämällä onfocus-tapahtuman käsittelyä (addEventListener()-metodin valinnainen useCapture-parametri)..
Vaikka Firefox ei tue onfocusin-tapahtumaa, voit määrittää elementin alielementin fokukseen käyttämällä onfocus-tapahtuman käsittelyä (addEventListener()-metodin valinnainen useCapture-parametri).Vinkki: onfocusout tapahtumaonfocusin-tapahtuma on samanlainen kuin
Vastakkainen.
Esimerkki
Esimerkki 1
Suoritetaan JavaScript, kun syötteen kenttä on saamassa fokusta:
<input type="text" onfocusin="myFunction()">
Sivun alaosassa on lisää TIY-esimerkkejä.
Syntaksi
HTML:ssä:< element.addEventListener("focusin",onfocusin="
">
JavaScriptissa käytetään addEventListener()-metodia:JavaScriptissa (Chrome, Safari ja Opera 15+ saattavat toimia epäonnistuneesti):.addEventListener("focusin",.onfocusin = function(){
};
JavaScriptissa käytetään addEventListener()-metodia:object .addEventListener("focusin",myScript
Huomautus:); Internet Explorer 8 tai aikaisemmat versiot eivät tueaddEventListener()-metodi
.
Tekninen yksityiskohta | Tuki |
---|---|
Bubbling: | Peruutettavissa: |
Ei tuettu | FocusEvent |
Tuetut HTML-merkit: | Kaikki HTML-elementit lukuun ottamatta:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ja <title> |
DOM-versio: | Taso 2 -tapahtumat |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.
Tapahtuma | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
onfocusin | Tuki | Tuki | 52.0 | Tuki | Tuki |
Huomautus:onfocusin-tapahtuma ei välttämättä toimi odotetusti Chrome, Safari ja Opera 15+ -selaajissa JavaScript HTML DOM -syntaksin kanssa. Se tulisi käyttää HTML-ominaisuuksena ja addEventListener() -menetelmänä (katso alla oleva syntaksiesimerkki).
Lisää esimerkkejä
Esimerkki 2
Käytä yhdessä "onfocusin" ja "onfocusout" -tapahtumia:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Esimerkki 3
Sovelluskohtaus: Aseta addEventListener() -metodin useCapture-arametri true (käytetään focus ja blur):
<form id="myForm"> <input type="text" id="myInput"> </form> <script> var x = document.getElementById("myForm"); x.addEventListener("focus", myFocusFunction, true); x.addEventListener("blur", myBlurFunction, true); function myFocusFunction() { document.getElementById("myInput").style.backgroundColor = "yellow"; } function myBlurFunction() { document.getElementById("myInput").style.backgroundColor = ""; } </script>
Esimerkki 4
Sovelluskohtaus: Käytä focusin-tapahtumaa:
<form id="myForm"> <input type="text" id="myInput"> </form> <script> var x = document.getElementById("myForm"); x.addEventListener("focusin", myFocusFunction); x.addEventListener("focusout", myBlurFunction); function myFocusFunction() { document.getElementById("myInput").style.backgroundColor = "yellow"; } function myBlurFunction() { document.getElementById("myInput").style.backgroundColor = ""; } </script>