Gli ultimi tutorial di sviluppo web
 

evento onfocusin

<Oggetto evento

Esempio

Esegui un JavaScript quando un campo di input sta per cominciare messa a fuoco:

<input type="text" onfocusin="myFunction()">
Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

L'evento onfocusin si verifica quando un elemento sta per cominciare messa a fuoco.

Suggerimento: L'evento onfocusin è simile al onfocus evento. La differenza principale è che l'evento onfocus non lo fa bolla. Pertanto, se si vuole scoprire se un elemento o il suo bambino riceve l'attenzione, è necessario utilizzare l'evento onfocusin.

Suggerimento: Anche se Firefox non supporta l'evento onfocusin, è possibile scoprire se un figlio di un elemento ottiene la messa a fuoco o no, utilizzando un ascoltatore di cattura per l'onfocus evento (utilizzando il parametro useCapture facoltativa della addEventListener() metodo).

Tip: L'evento onfocusin è l'opposto del onfocusout dell'evento.

Supporto browser

Evento
onfocusin sì sì Non supportato sì sì

Nota: L'evento onfocusin potrebbe non funzionare come previsto in Chrome, Safari e Opera 15+ utilizzando la sintassi JavaScript HTML DOM. Tuttavia, dovrebbe funzionare come attributo HTML e utilizzando addEventListener() metodo.

Sintassi

In HTML:

< Prova tu stesso "

In JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :

object .onfocusin=function(){ Prova tu stesso "

In JavaScript, utilizzando il addEventListener() Metodo:

object .addEventListener("focusin", myScript );
Prova tu stesso "

Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.

Dettagli tecnici

bolle: sì
cancelable: No
Tipo di evento: FocusEvent
tag HTML supportati: Tutti gli elementi HTML, ad eccezione di: <base>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title>
DOM Versione: Livello 2 Eventi
Esempi

Altri esempi

Esempio

Utilizzando "onfocusin" insieme al "onfocusout" evento:

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

Esempio

Delegazione evento: impostando il parametro useCapture di addEventListener() su true (for focus and 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 tu stesso "

Esempio

delegazione evento: utilizzando l'evento focusIn (non supportato da 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>
Prova tu stesso "
<Oggetto evento