Zdarzenie onfocus

Zdarzenia DOM Zdarzenie FocusEvent

Definicja i użycie

Zdarzenie onfocus występuje, gdy element uzyskuje fokus.

Zdarzenie onfocus jest najczęściej używane z <input>, <select> i <a>.

Uwaga: Zdarzenie onfocus jest używane z Zdarzenie onblurprzeciwnie.

Uwaga: Zdarzenie onfocus jest podobne do Zdarzenie onfocusinGłówna różnica polega na tym, że zdarzenie onfocus nie buzuje. Dlatego, jeśli chcesz określić, czy element lub jego podelement uzyskał fokus, możesz użyć zdarzenia onfocusin. Jednak możesz również użyć zdarzenia onfocus, Metoda addEventListener()z useCapture Parametrów do tego celu.

Przykład

Przykład 1

Wykonaj JavaScript, gdy pole wejściowe uzyska fokus:

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

Spróbuj sam

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

Gramatyka

W HTML:

<element onfocus="myScript">

Spróbuj sam

W JavaScript:

obiekt.onfocus = function(){myScript};

Spróbuj sam

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

obiekt.addEventListener("focus", myScript);

Spróbuj sam

Komentarz:Internet Explorer 8 lub wcześniejsze wersje nie obsługują tego Metoda addEventListener()。

Szczegóły techniczne

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

Obsługa przeglądarek

Zdarzenia Chrome IE Firefox Safari Opera
onfocus Obsługa Obsługa Obsługa Obsługa Obsługa

Więcej przykładów

Przykład 2

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

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

Spróbuj sam

Przykład 3

Wyczyść pole wejściowe uzyskujące fokus:

Kiedy pole wejściowe uzyskuje fokus, zastępuje jego bieżącą wartość pustym łańcuchem znaków:
<input type="text" onfocus="this.value=''" value="Blabla">

Spróbuj sam

Przykład 4

Przekazywanie zdarzeń: 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 5

Przekazywanie zdarzeń: 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 Zdarzenie FocusEvent