Zdarzenie onfocusin

Zdarzenia DOM FocusEvent

Definicja i użycie

Zdarzenie onfocusin występuje, gdy element jest na progu uzyskania fakturowania.

Chociaż Firefox nie obsługuje zdarzenia onfocusin, można określić, czy element lub jego podelement uzyskał fokus, używając słuchacza zdarzenia onfocus (opcjonalny parametr useCapture metody addEventListener()).Zdarzenie onfocusin jest podobne do Zdarzenie onfocusGłówna różnica polega na tym, że zdarzenie onfocus nie bąbelkuje. Dlatego, jeśli chcesz wiedzieć, czy element lub jego podelement uzyskał fokus, powinieneś użyć zdarzenia onfocusin.

Chociaż Firefox nie obsługuje zdarzenia onfocusin, można określić, czy element lub jego podelement uzyskał fokus, używając słuchacza zdarzenia onfocus (opcjonalny parametr useCapture metody addEventListener())..

Chociaż Firefox nie obsługuje zdarzenia onfocusin, można określić, czy element lub jego podelement uzyskał fokus, używając słuchacza zdarzenia onfocus (opcjonalny parametr useCapture metody addEventListener()).Uwaga: Zdarzenie onfocusoutZdarzenie onfocusin jest podobne do

Przeciwnie.

Przykład

Przykład 1

Wykonaj JavaScript, gdy pole wejściowe jest na progu uzyskania fakturowania:

Spróbuj sam

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

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

Gramatyka

W HTML:< element.addEventListener("focusin",onfocusin="

Spróbuj sam

">

W JavaScript, używając metody addEventListener():W JavaScript (może nie działać poprawnie w Chrome, Safari i Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Spróbuj sam

};

W JavaScript, używając metody addEventListener():object .addEventListener("focusin",myScript

Spróbuj sam

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

.

Szczegóły techniczne Obsługa
Pętlą bąbelkową: Można anulować:
Nieobsługiwane FocusEvent
Obsługiwane tagi HTML: Wszystkie elementy HTML, z wyjątkiem: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> oraz <title>
Wersja DOM: Poziom 2 Wydarzenia

Obsługa przeglądarek

Numer w tabeli oznacza pierwszą wersję przeglądarki, która w pełni obsługuje to wydarzenie.

Wydarzenie Chrome IE Firefox Safari Opera
onfocusin Obsługa Obsługa 52.0 Obsługa Obsługa

Komentarz:Wydarzenie onfocusin może nie działać zgodnie z oczekiwaniami w przeglądarkach Chrome, Safari i Opera 15+. Ale powinno być używane jako atrybut HTML i z metodą addEventListener() (patrz poniższy przykład składni).

Więcej przykładów

Przykład 2

Użycie razem z wydarzeniami "onfocusin" i "onfocusout":

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Spróbuj sam

Przykład 3

Delegacja wydarzeń: ustawienie parametru useCapture w addEventListener() na true (używane dla focus i blur):

<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 4

Delegacja wydarzeń: użycie 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>

Spróbuj sam

Zdarzenia DOM FocusEvent