Wydarzenie w centrum uwagi
Przykład
Wykonaj JavaScript, gdy pole wejściowe stanie się aktywne:
<input type="text"
onfocus="myFunction()">
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie onfocus występuje, gdy element staje się aktywny.
Zdarzenie onfocus jest najczęściej używane z <input>, <select> i <a>.
Wskazówka: Zdarzenie onfocus jest przeciwieństwem zdarzenia onblur .
Wskazówka: Zdarzenie onfocusin jest podobne do zdarzenia onfocusin . 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, możesz użyć zdarzenia onfocusin. Można to jednak osiągnąć, używając opcjonalnego parametru useCapture metody addEventListener() dla zdarzenia onfocus.
Obsługa przeglądarki
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
Składnia
W HTML:
<element onfocus="myScript">
W JavaScript:
object.onfocus = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("focus", 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 „onfocus” razem ze zdarzeniem „onblur”:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Przykład
Wyczyść pole wprowadzania na fokus:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
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>