Beispiel
Führen Sie einen JavaScript, wenn ein Benutzer ein Eingabefeld verlässt:
<input type="text" onblur="myFunction()">
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die onblur Ereignis tritt auf, wenn ein Objekt den Fokus verliert.
Die onblur Veranstaltung wird am häufigsten mit Formularvalidierung Code verwendet wird (zB wenn der Benutzer ein Formularfeld verlässt).
Tip: Das onblur Ereignis ist das Gegenteil von dem onfocus - Ereignisse.
Tipp: Das onblur Ereignis ähnelt dem onfocusout Ereignis. Der wesentliche Unterschied besteht darin, dass das onblur Ereignis nicht Blase. Deshalb, wenn Sie ein Element oder sein Kind herausfinden wollen, ob der Fokus verliert, könnten Sie die onfocusout Ereignis verwenden. Allerdings können Sie dies erreichen , indem Sie den optionalen Parameter useCapture der mit addEventListener() Methode für die onblur Ereignis.
Browser-Unterstützung
| Event | |||||
|---|---|---|---|---|---|
| onblur | Ja | Ja | Ja | Ja | Ja |
Syntax
In HTML:
In JavaScript:
object .onblur=function(){ Versuch es selber " In JavaScript mit den addEventListener() Methode:
object .addEventListener("blur", myScript );
Versuch es selber " Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen.
Technische Details
| Blasen: | Nein |
|---|---|
| Es fällt eine Pauschale: | Nein |
| Event-Typ: | Focus |
| Unterstützte HTML-Tags: | Alle HTML - Elemente, AUSSER: <base>, <bdo>, in , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
| DOM Version: | Level 2 Veranstaltungen |
Mehr Beispiele
Beispiel
Mit "onblur" zusammen mit dem "onfocus" Event:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Versuch es selber " Beispiel
Ereignis Delegation: die useCapture Parameter der Einstellung 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>
Versuch es selber " Beispiel
Event-Delegation: das focusin Ereignis (nicht von Firefox 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>
Versuch es selber " <Ereignisobjekt