onfocus- evenement
Voorbeeld
Voer een JavaScript uit wanneer een invoerveld focus krijgt:
<input type="text"
onfocus="myFunction()">
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De onfocus-gebeurtenis vindt plaats wanneer een element focus krijgt.
De onfocus-gebeurtenis wordt meestal gebruikt met <input>, <select> en <a>.
Tip: De onfocus-gebeurtenis is het tegenovergestelde van de onblur- gebeurtenis.
Tip: De onfocus-gebeurtenis is vergelijkbaar met de onfocusin- gebeurtenis. Het belangrijkste verschil is dat de onfocus-gebeurtenis niet bubbelt. Als je dus wilt weten of een element of zijn kind de focus krijgt, kun je de gebeurtenis onfocusin gebruiken. U kunt dit echter bereiken door de optionele parameter useCapture van de methode addEventListener() te gebruiken voor de onfocus-gebeurtenis.
Browserondersteuning
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Yes | Yes | Yes | Yes | Yes |
Syntaxis
In HTML:
<element onfocus="myScript">
In javascript:
object.onfocus = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("focus", myScript);
Opmerking: de methode addEventListener() wordt niet ondersteund in Internet Explorer 8 en eerdere versies.
Technische details
| bubbels: | Nee |
|---|---|
| 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
"onfocus" gebruiken samen met de "onblur"-gebeurtenis:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Voorbeeld
Invoerveld op focus wissen:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Voorbeeld
Gebeurtenisoverdracht: de parameter useCapture van addEventListener() instellen op true:
<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
Gebeurtenis delegatie: met behulp van de focusin gebeurtenis (niet ondersteund door Firefox):
<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>