Wydarzenie onblur
Przykład
Wykonaj JavaScript, gdy użytkownik opuści pole wejściowe:
<input type="text" onblur="myFunction()">
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie rozmycia występuje, gdy obiekt traci ostrość.
Zdarzenie onblur jest najczęściej używane z kodem walidacji formularza (np. gdy użytkownik opuszcza pole formularza).
Wskazówka: Zdarzenie onblur jest przeciwieństwem zdarzenia onfocus .
Wskazówka: zdarzenie onblur jest podobne do zdarzenia onfocusout . Główna różnica polega na tym, że zdarzenie onblur nie pęka. Dlatego jeśli chcesz dowiedzieć się, czy element lub jego element potomny traci fokus, możesz użyć zdarzenia onfocusout. Można to jednak osiągnąć, używając opcjonalnego parametru useCapture metody addEventListener() dla zdarzenia onblur.
Obsługa przeglądarki
Event | |||||
---|---|---|---|---|---|
onblur | Yes | Yes | Yes | Yes | Yes |
Składnia
W HTML:
<element onblur="myScript">
W JavaScript:
object.onblur = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("blur", myScript);
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
Bąbelki: | Nie |
---|---|
Możliwość anulowania: | Nie |
Typ wydarzenia: | FocusEvent |
Obsługiwane tagi HTML: | WSZYSTKIE elementy HTML, Z WYJĄTKIEM: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> i <title> |
Wersja DOM: | Wydarzenia poziomu 2 |
Więcej przykładów
Przykład
Używanie „onblur” razem ze zdarzeniem „onfocus”:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Przykład
Delegacja zdarzenia: ustawienie parametru useCapture metody addEventListener() na wartość 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>
Przykład
Delegowanie zdarzenia: za pomocą 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>