onblur- Ereignis
Beispiel
Ausführen eines JavaScripts, wenn ein Benutzer ein Eingabefeld verlässt:
<input type="text" onblur="myFunction()">
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das onblur-Ereignis tritt auf, wenn ein Objekt den Fokus verliert.
Das onblur-Ereignis wird am häufigsten mit Formularvalidierungscode verwendet (z. B. wenn der Benutzer ein Formularfeld verlässt).
Tipp: Das onblur-Ereignis ist das Gegenteil des onfocus- Ereignisses.
Tipp: Das onblur-Ereignis ähnelt dem onfocusout- Ereignis. Der Hauptunterschied besteht darin, dass das onblur-Ereignis nicht sprudelt. Wenn Sie also herausfinden möchten, ob ein Element oder sein untergeordnetes Element den Fokus verliert, können Sie das Ereignis onfocusout verwenden. Sie können dies jedoch erreichen, indem Sie den optionalen useCapture- Parameter der addEventListener()- Methode für das onblur-Ereignis verwenden.
Browser-Unterstützung
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
Syntax
Im HTML-Format:
<element onblur="myScript">
In JavaScript:
object.onblur = function(){myScript};
Verwenden Sie in JavaScript die Methode addEventListener():
object.addEventListener("blur", myScript);
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
| Bläschen: | Nein |
|---|---|
| kündbar: | Nein |
| Ereignistyp: | FocusEvent |
| Unterstützte HTML-Tags: | ALLE HTML-Elemente, AUSSER: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
| DOM-Version: | Ereignisse der Ebene 2 |
Mehr Beispiele
Beispiel
Verwendung von "onblur" zusammen mit dem "onfocus"-Ereignis:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Beispiel
Ereignisdelegierung: Setzen des useCapture- Parameters von addEventListener() auf 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>
Beispiel
Ereignisdelegierung: Verwendung des Focusin-Ereignisses (wird von Firefox nicht unterstützt):
<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>