Kursrekommendationer:

DOM-händelser FocusEvent

onfocusin-incidenten

Definition och användning

Trots att Firefox inte stöder onfocusin-incidenten, kan du använda en capture-listenare för onfocus-incidenten (valfri parameter useCapture i addEventListener() metoden) för att avgöra om en underkomponent får fokus på ett element.onfocusin-incidenten inträffar när ett element närmar sig att få fokus. onfocus-händelseonfocusin-incidenten liknar

Trots att Firefox inte stöder onfocusin-incidenten, kan du använda en capture-listenare för onfocus-incidenten (valfri parameter useCapture i addEventListener() metoden) för att avgöra om en underkomponent får fokus på ett element.Fördelen är att onfocus-incidenten inte bubblar. Därför, om du vill veta om ett element eller dess underkomponenter får fokus, bör du använda onfocusin-incidenten.

Trots att Firefox inte stöder onfocusin-incidenten, kan du använda en capture-listenare för onfocus-incidenten (valfri parameter useCapture i addEventListener() metoden) för att avgöra om en underkomponent får fokus på ett element.Tips: onfocusout-händelseonfocusin-incidenten med

Omvänt.

Exempel

Exempel 1

Kör JavaScript när inmatningsfältet närmar sig att få fokus:

Prova själv

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

På sidan finns fler TIY-exempel.

Syntaks

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

Prova själv

">

i JavaScript, använd addEventListener() metoden:i JavaScript (kan inte fungera korrekt i Chrome, Safari och Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Prova själv

};

i JavaScript, använd addEventListener() metoden:object .addEventListener("focusin",myScript

Prova själv

Note:); Internet Explorer 8 eller tidigare versioner stöder inteaddEventListener() metoden

。

Tekniska detaljer: Supports
Bubbling: Kan avbrytas:
Inte stödd: FocusEvent
Stödda HTML-taggar: Alla HTML-element, utom: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> samt <title>
DOM version: Level 2 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the event.

Event Chrome IE Firefox Safari Opera
onfocusin Supports Supports 52.0 Supports Supports

Note:The onfocusin event may not work as expected in Chrome, Safari, and Opera 15+ when using JavaScript HTML DOM syntax. However, it should be used as an HTML attribute and with the addEventListener() method (see the syntax examples below).

More examples

Example 2

Use the "onfocusin" and "onfocusout" events together:

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

Prova själv

Example 3

Event delegation: set the useCapture parameter of addEventListener() to true (for focus and 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>

Prova själv

Example 4

Event delegation: using the focusin event:

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

Prova själv

DOM-händelser FocusEvent