onfocusin-gebeurtenis

DOM events FocusEvent

Definitie en gebruik

De onfocusin-gebeurtenis treedt op wanneer een element op het punt staat om de focus te krijgen.

Hoewel Firefox de onfocusin-gebeurtenis niet ondersteunt, kunt u door gebruik te maken van de catch listener van het onfocus-gebeurtenis (met behulp van de optionele useCapture parameter van de addEventListener() methode) controleren of een sub-element van een element de focus krijgt.onfocusin-gebeurtenis lijkt op onfocus eventHoofdvergelijkingen liggen in het feit dat het onfocus-gebeurtenis niet bubbelt. Daarom, als u wilt weten of een element of een sub-element de focus krijgt, moet u de onfocusin-gebeurtenis gebruiken.

Hoewel Firefox de onfocusin-gebeurtenis niet ondersteunt, kunt u door gebruik te maken van de catch listener van het onfocus-gebeurtenis (met behulp van de optionele useCapture parameter van de addEventListener() methode) controleren of een sub-element van een element de focus krijgt..

Hoewel Firefox de onfocusin-gebeurtenis niet ondersteunt, kunt u door gebruik te maken van de catch listener van het onfocus-gebeurtenis (met behulp van de optionele useCapture parameter van de addEventListener() methode) controleren of een sub-element van een element de focus krijgt.Tip: onfocusout eventonfocusin-gebeurtenis met

Onderschrift.

Voorbeeld

Voorbeeld 1

Voer JavaScript uit wanneer het invoerveld op het punt staat om de focus te krijgen:

Try it yourself

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

Er zijn meer TIY-exempelen onder de pagina.

Syntax

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

Try it yourself

">

In JavaScript, gebruik de addEventListener() methode:In JavaScript (kan mogelijk niet correct werken in Chrome, Safari en Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Try it yourself

};

In JavaScript, gebruik de addEventListener() methode:object .addEventListener("focusin",myScript

Try it yourself

Opmerking:); Internet Explorer 8 of eerder ondersteunt deze nietaddEventListener() methode

.

Technische details: Ondersteuning
Bubbel: Annuleerbaar:
Niet ondersteund: FocusEvent
Ondersteunde HTML-labelen: Alle HTML-elementen, behalve: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>
DOM-versie: Level 2 Events

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die het evenement volledig ondersteunt.

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

Opmerking:Opmerking: de onfocusin-event werkt mogelijk niet zoals verwacht in Chrome, Safari en Opera 15+ met de JavaScript HTML DOM-syntax. Het moet echter als HTML-eigenschap worden gebruikt en de addEventListener()-methode (zie onderstaande syntaxisvoorbeelden).

Meer voorbeelden

Voorbeeld 2

Gebruik "onfocusin" en "onfocusout"-evenementen samen:

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

Try it yourself

Voorbeeld 3

Event delegation: stel de useCapture-parameter van addEventListener() in op true (voor focus en 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>

Try it yourself

Voorbeeld 4

Event delegation: gebruik het focusin-evenement:

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

Try it yourself

DOM events FocusEvent