Wydarzenie onfocusout
Przykład
Wykonaj JavaScript, gdy pole wejściowe wkrótce straci ostrość:
<input type="text"
onfocusout="myFunction()">
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie onfocusout występuje, gdy element jest bliski utraty ostrości.
Wskazówka: zdarzenie onfocusout jest podobne do zdarzenia onblur . 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, powinieneś użyć zdarzenia onfocusout.
Wskazówka: zdarzenie onfocusout jest przeciwieństwem zdarzenia onfocusin .
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
Uwaga: zdarzenie onfocusout może nie działać zgodnie z oczekiwaniami w przeglądarkach Chrome, Safari i Opera 15+ przy użyciu składni JavaScript HTML DOM. Powinien jednak działać jako atrybut HTML i przy użyciu metody addEventListener() (patrz przykłady składni poniżej).
Składnia
W HTML:
<element onfocusout="myScript">
W JavaScript (może nie działać zgodnie z oczekiwaniami w Chrome, Safari i Opera 15+):
object.onfocusout = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("focusout", myScript);
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
| Bąbelki: | tak |
|---|---|
| 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 „onfocusin” razem ze zdarzeniem „onfocusout”:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Przykład
Delegowanie zdarzeń: ustawienie parametru useCapture metody addEventListener() na wartość true (dla skupienia i rozmycia):
<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
Delegacja wydarzenia: za pomocą wydarzenia focusin:
<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>