onfocusin-tapahtuma

DOM-tapahtumat FocusEvent

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:

Kokeile itse

<input type="text" onfocusin="myFunction()">

Sivun alaosassa on lisää TIY-esimerkkejä.

Syntaksi

HTML:ssä:< element.addEventListener("focusin",onfocusin="

Kokeile itse

">

JavaScriptissa käytetään addEventListener()-metodia:JavaScriptissa (Chrome, Safari ja Opera 15+ saattavat toimia epäonnistuneesti):.addEventListener("focusin",.onfocusin = function(){

Kokeile itse

};

JavaScriptissa käytetään addEventListener()-metodia:object .addEventListener("focusin",myScript

Kokeile itse

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()">

Kokeile itse

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>

Kokeile itse

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>

Kokeile itse

DOM-tapahtumat FocusEvent