onfocusin-tilfældet

DOM begivenheder FocusEvent

Definition og brug

onfocusin-tilfældet opstår, når et element er ved at få fokus.

Vedvarendeonfocusin-tilfældet ligner onfocus begivenhed.Den vigtigste forskel er, at onfocus-tilfældet ikke bobler. Derfor, hvis du vil vide, om et element eller dens underelementer får fokus, skal du bruge onfocusin-tilfældet.

VedvarendeSelvom Firefox ikke understøtter onfocusin-tilfældet, kan du bruge en fangstlytter for onfocus-tilfældet (med valgfri parameter useCapture for addEventListener() metoden) for at bestemme, om et element eller dens underelementer får fokus.

VedvarendeVedvarende onfocusout begivenhedonfocusin-tilfældet med

Modsat.

Eksempel

Eksempel 1

Udfør JavaScript, når inputfeltet er ved at få fokus:

Prøv det selv

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

Der er flere TIY-eksempler nedenfor på siden.

Syntaks

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

Prøv det selv

">

I JavaScript, brug addEventListener() metoden:I JavaScript (kan muligvis ikke fungere korrekt i Chrome, Safari og Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Prøv det selv

};

I JavaScript, brug addEventListener() metoden:object .addEventListener("focusin",myScript

Prøv det selv

Bemærk:); Internet Explorer 8 eller tidligere versioner understøtter ikkeaddEventListener() metoden

.

Tekniske detaljer Support
Bobling: Kan annulleres:
Ikke understøttet FocusEvent
Støttede HTML-elementer: Alle HTML-elementer, med undtag: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> og <title>
DOM version: Level 2 Events

Browserunderstøttelse

Tallet i tabellen angiver den første browserversion, der fuldt ud understøtter arrangementet.

Arrangement Chrome IE Firefox Safari Opera
onfocusin Support Support 52.0 Support Support

Bemærk:Advarsel: onfocusin-arrangementet kan ikke fungere som forventet i Chrome, Safari og Opera 15+ ved brug af JavaScript HTML DOM-syntaks. Men det bør bruges som HTML-attribut og med addEventListener() metoden (se nedenstående syntaks-eksempel).

Flere eksempler

Eksempel 2

Brug af "onfocusin" og "onfocusout"-arrangementer sammen:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Prøv det selv

Eksempel 3

Event delegation: sæt addEventListener()'s useCapture parameter til true (brugt til focus og 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>

Prøv det selv

Eksempel 4

Event delegation: brug af focusin-arrangementet:

<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>

Prøv det selv

DOM begivenheder FocusEvent