onfocusin evenement
Voorbeeld
Voer een JavaScript uit wanneer een invoerveld op het punt staat focus te krijgen:
<input type="text"
onfocusin="myFunction()">
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De onfocusin-gebeurtenis vindt plaats wanneer een element op het punt staat focus te krijgen.
Tip: De onfocusin-gebeurtenis is vergelijkbaar met de onfocus - gebeurtenis. Het belangrijkste verschil is dat de onfocus-gebeurtenis niet bubbelt. Daarom, als je wilt weten of een element of zijn kind de focus krijgt, moet je de gebeurtenis onfocusin gebruiken.
Tip: De onfocusin-gebeurtenis is het tegenovergestelde van de onfocusout- gebeurtenis.
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de gebeurtenis volledig ondersteunt.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Opmerking: de gebeurtenis onfocusin werkt mogelijk niet zoals verwacht in Chrome, Safari en Opera 15+ met behulp van de JavaScript HTML DOM-syntaxis. Het zou echter moeten werken als een HTML-kenmerk en door de methode addEventListener() te gebruiken (zie onderstaande syntaxisvoorbeelden).
Syntaxis
In HTML:
<element onfocusin="myScript">
In JavaScript (werkt mogelijk niet zoals verwacht in Chrome, Safari en Opera 15+):
object.onfocusin = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("focusin", myScript);
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
bubbels: | Ja |
---|---|
Annuleerbaar: | Nee |
Evenementtype: | FocusEvent |
Ondersteunde HTML-tags: | ALLE HTML-elementen, BEHALVE: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title> |
DOM-versie: | Niveau 2 Evenementen |
Meer voorbeelden
Voorbeeld
"onfocusin" gebruiken samen met de "onfocusout"-gebeurtenis:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Voorbeeld
Gebeurtenis delegatie: de parameter useCapture van addEventListener() instellen op true (voor focus en vervaging):
<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>
Voorbeeld
Event delegatie: gebruik de 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>