Zdarzenie onblur

Zdarzenia DOM FocusEvent

Definicja i użycie

Zdarzenie onblur występuje, gdy obiekt traci fokus.

Zdarzenie onblur najczęściej jest używane z kodem walidacji formularza (np., gdy użytkownik opuszcza pole formularza).

Wskazówka: Zdarzenie onblur jest podobne do Zdarzenie onfocusprzeciwieństwie.

Wskazówka: Zdarzenie onblur jest podobne do Zdarzenie onfocusout。Główna różnica polega na tym, że zdarzenie onblur nie buzuje. Dlatego, jeśli chcesz sprawdzić, czy element lub jego potomkowie stracili fokus, możesz użyć zdarzenia onfocusout. Jednak możesz to zrobić poprzez użycie zdarzenia onblur, Metoda addEventListener()parametr useCapture (opcjonalny) do tego celu.

Przykład

Wykonaj JavaScript, gdy użytkownik opuszcza pole wejściowe:

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

Spróbuj sam

Poniżej znajduje się więcej przykładów TIY.

Gramatyka

W HTML:

<element onblur="myScript">

Spróbuj sam

W JavaScript:

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

Spróbuj sam

W JavaScript, używając metody addEventListener():

obiekt.addEventListener("blur", myScript);

Spróbuj sam

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują Metoda addEventListener().

Szczegóły techniczne

Bąbelkowanie: Nieobsługiwane
Można anulować: Nieobsługiwane
Typ zdarzenia: FocusEvent
Obsługiwane znaczniki HTML: Wszystkie elementy HTML, z wyjątkiem: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> oraz <title>
Wersja DOM: Poziom 2 Zdarzenia

Obsługa przeglądarki

Zdarzenia Chrome IE Firefox Safari Opera
onblur Obsługiwane Obsługiwane Obsługiwane Obsługiwane Obsługiwane

Więcej przykładów

Przykład

Użycie razem "onblur" i "onfocus" zdarzeń:

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

Spróbuj sam

Przykład

Przełączanie wydarzeń: ustawienie parametru useCapture w addEventListener() na 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>

Spróbuj sam

Przykład

Przełączanie wydarzeń: użycie zdarzenia focusin (nieobsługiwane przez 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>

Spróbuj sam

Zdarzenia DOM FocusEvent