Evento onfocusin

Eventi DOM FocusEvent

Definizione e uso

L'evento onfocusin si verifica quando un elemento sta per ottenere il fuoco.

Nonostante Firefox non supporti l'evento onfocusin, è possibile determinare se un elemento figlio ha ottenuto il fuoco utilizzando l'ascoltatore di cattura dell'evento onfocus (utilizzando il parametro opzionale useCapture del metodo addEventListener()).L'evento onfocusin è simile a Evento onfocusLa principale differenza è che l'evento onfocus non si serra. Pertanto, se si desidera sapere se un elemento o uno dei suoi elementi figli ha ottenuto il fuoco, si dovrebbe utilizzare l'evento onfocusin.

Nonostante Firefox non supporti l'evento onfocusin, è possibile determinare se un elemento figlio ha ottenuto il fuoco utilizzando l'ascoltatore di cattura dell'evento onfocus (utilizzando il parametro opzionale useCapture del metodo addEventListener())..

Nonostante Firefox non supporti l'evento onfocusin, è possibile determinare se un elemento figlio ha ottenuto il fuoco utilizzando l'ascoltatore di cattura dell'evento onfocus (utilizzando il parametro opzionale useCapture del metodo addEventListener()).Suggerimento: Evento onfocusoutEvento onfocusin con

All'opposto.

Esempio

Esempio 1

Esegui JavaScript quando il campo di input sta per ottenere il fuoco:

Prova personalmente

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

Sotto la pagina ci sono più esempi TIY.

Sintassi

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

Prova personalmente

">

In JavaScript, utilizzare il metodo addEventListener():In JavaScript (potrebbe non funzionare correttamente in Chrome, Safari e Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Prova personalmente

};

In JavaScript, utilizzare il metodo addEventListener():object .addEventListener("focusin",myScript

Prova personalmente

Nota:); Internet Explorer 8 o versioni precedenti non supportanoMetodo addEventListener()

.

Dettagli tecnici: Supporta
Bubbling: Cancellabile:
Non supportato: FocusEvent
Tag HTML supportati: Tutti gli elementi HTML, eccetto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title>
Versione DOM: Eventi Livello 2

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente l'evento.

Evento Chrome IE Firefox Safari Opera
onfocusin Supporta Supporta 52.0 Supporta Supporta

Nota:L'evento onfocusin potrebbe non funzionare come previsto in Chrome, Safari e Opera 15+ utilizzando la sintassi JavaScript HTML DOM. Tuttavia, dovrebbe essere utilizzato come attributo HTML e con il metodo addEventListener() (vedere gli esempi di sintassi di seguito).

Più esempi

Esempio 2

Utilizzo congiunto degli eventi "onfocusin" e "onfocusout":

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

Prova personalmente

Esempio 3

Delegazione degli eventi: impostare il parametro useCapture di addEventListener() su true (usato per focus e 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>

Prova personalmente

Esempio 4

Delegazione degli eventi: utilizzo dell'evento 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>

Prova personalmente

Eventi DOM FocusEvent