Recommended courses:

DOM-Ereignisse FocusEvent

onblur event

Definition and Usage

occurs when an object loses focus.

umgekehrt. The onblur event is most commonly used with form validation code (for example, when the user leaves a form field). onfocus-Ereignisevent is similar to

umgekehrt. Hinweis: onfocusout-Ereignisevent is similar to addEventListener() Methodeto achieve this. The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child elements have lost focus, you can use the onfocusout event. However, you can use the onblur event's

Beispiel

Execute JavaScript when the user leaves the input field:

<input type="text" onblur="myFunction()">

Probieren Sie es selbst aus

There are more TIY examples at the bottom of the page.

Syntax

In HTML:

<element onblur="myScript">

Probieren Sie es selbst aus

In JavaScript:

object.onblur = function(){}myScript};

Probieren Sie es selbst aus

Verwenden Sie die Methode addEventListener() in JavaScript:

object.addEventListener("blur", myScript);

Probieren Sie es selbst aus

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen dies nicht addEventListener() Methode.

Technische Details

Blasen: Nicht unterstützt
Kann abgebrochen werden: Nicht unterstützt
Ereignis-Typ: FocusEvent
Unterstützte HTML-Tags: Alle HTML-Elemente, außer: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title>
DOM-Version: Level 2 Ereignisse

Browser-Unterstützung

Ereignis Chrome IE Firefox Safari Opera
onblur Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

Mehr Beispiele

Beispiel

Verwenden Sie "onblur" und "onfocus"-Ereignisse zusammen:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Probieren Sie es selbst aus

Beispiel

Event Delegation: Setzen Sie den useCapture-Parameter 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>

Probieren Sie es selbst aus

Beispiel

Event Delegation: Verwenden Sie das "focusin"-Ereignis (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>

Probieren Sie es selbst aus

DOM-Ereignisse FocusEvent