onblur- evenement
Voorbeeld
Voer een JavaScript uit wanneer een gebruiker een invoerveld verlaat:
<input type="text" onblur="myFunction()">
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De onblu-gebeurtenis treedt op wanneer een object de focus verliest.
De gebeurtenis onblur wordt meestal gebruikt met formuliervalidatiecode (bijv. wanneer de gebruiker een formulierveld verlaat).
Tip: De onblur-gebeurtenis is het tegenovergestelde van de onfocus - gebeurtenis.
Tip: De onblur-gebeurtenis is vergelijkbaar met de onfocusout- gebeurtenis. Het belangrijkste verschil is dat de onblur-gebeurtenis niet bubbelt. Als u dus wilt weten of een element of zijn kind de focus verliest, kunt u de gebeurtenis onfocusout gebruiken. U kunt dit echter bereiken door de optionele parameter useCapture van de methode addEventListener() te gebruiken voor de gebeurtenis onblur.
Browserondersteuning
Event | |||||
---|---|---|---|---|---|
onblur | Yes | Yes | Yes | Yes | Yes |
Syntaxis
In HTML:
<element onblur="myScript">
In javascript:
object.onblur = function(){myScript};
In JavaScript, met behulp van de addEventListener()-methode:
object.addEventListener("blur", 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
"onblur" gebruiken samen met de "onfocus"-gebeurtenis:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
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>