onfocusin Wydarzenie
Przykład
Wykonaj JavaScript, gdy pole wejściowe ma zostać uaktywnione:
<input type="text"
onfocusin="myFunction()">
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie onfocusin występuje, gdy element ma uzyskać fokus.
Wskazówka: Zdarzenie onfocusin jest podobne do zdarzenia onfocus . Główna różnica polega na tym, że zdarzenie onfocus nie pęka. Dlatego jeśli chcesz dowiedzieć się, czy element lub jego element potomny ma fokus, powinieneś użyć zdarzenia onfocusin.
Wskazówka: zdarzenie onfocusin jest przeciwieństwem zdarzenia onfocusout .
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Uwaga: zdarzenie onfocusin 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 onfocusin="myScript">
W JavaScript (może nie działać zgodnie z oczekiwaniami w Chrome, Safari i Opera 15+):
object.onfocusin = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("focusin", 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>