Gli ultimi tutorial di sviluppo web
 

evento onfocusout

<Oggetto evento

Esempio

Esegui un JavaScript quando un campo di input è in procinto di perdere la concentrazione:

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

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

L'evento onfocusout si verifica quando un elemento è in procinto di perdere la concentrazione.

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

Suggerimento: Anche se Firefox non supporta l'evento onfocusout, è possibile scoprire se un figlio di un elemento perde lo stato attivo o no, utilizzando un ascoltatore di cattura per il onblur evento (utilizzando il parametro useCapture facoltativa della addEventListener() metodo).

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

Supporto browser

Evento
onfocusout sì sì Non supportato sì sì

Nota: L'evento onfocusout 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 .onfocusout=function(){ Prova tu stesso "

In JavaScript, utilizzando il addEventListener() Metodo:

object .addEventListener("focusout", 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