onfocusout- Ereignis
Beispiel
Führen Sie ein JavaScript aus, wenn ein Eingabefeld den Fokus zu verlieren droht:
<input type="text"
onfocusout="myFunction()">
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das onfocusout-Ereignis tritt auf, wenn ein Element kurz davor steht, den Fokus zu verlieren.
Tipp: Das onfocusout-Ereignis ähnelt dem onblur- 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, sollten Sie das Ereignis onfocusout verwenden.
Tipp: Das Ereignis onfocusout ist das Gegenteil des Ereignisses onfocusin .
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignis vollständig unterstützt.
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
Hinweis: Das onfocusout-Ereignis funktioniert möglicherweise nicht wie erwartet in Chrome, Safari und Opera 15+ mit der JavaScript-HTML-DOM-Syntax. Es sollte jedoch als HTML-Attribut und unter Verwendung der Methode addEventListener() funktionieren (siehe Syntaxbeispiele unten).
Syntax
Im HTML-Format:
<element onfocusout="myScript">
In JavaScript (funktioniert möglicherweise nicht wie erwartet in Chrome, Safari und Opera 15+):
object.onfocusout = function(){myScript};
Verwenden Sie in JavaScript die Methode addEventListener():
object.addEventListener("focusout", myScript);
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
| Bläschen: | ja |
|---|---|
| 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 "onfocusin" zusammen mit dem "onfocusout"-Ereignis:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Beispiel
Event-Delegation: setze den Parameter useCapture von addEventListener() auf true (für Focus und 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>
Beispiel
Ereignisdelegierung: Verwenden des Focusin-Ereignisses:
<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>