Gli ultimi tutorial di sviluppo web
 

onblur Event

<Oggetto evento

Esempio

Esegui un JavaScript quando un utente lascia un campo di input:

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

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

L'evento onblur si verifica quando un oggetto perde lo stato attivo.

L'evento onblur è più spesso utilizzato con il codice di validazione dei form (ad esempio, quando l'utente lascia un campo di modulo).

Tip: L'evento onblur è l'opposto del onfocus dell'evento.

Suggerimento: L'evento onblur è simile al onfocusout 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, è possibile utilizzare l'evento onfocusout. Tuttavia, è possibile raggiungere questo obiettivo utilizzando il parametro useCapture facoltativa della addEventListener() metodo per l'evento onblur.

Supporto browser

Evento
onblur sì sì sì sì sì

Sintassi

In HTML:

< Prova tu stesso "

In JavaScript:

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

In JavaScript, utilizzando il addEventListener() Metodo:

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

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

Dettagli tecnici

bolle: No
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 "onblur" insieme al "onfocus" evento:

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

Esempio

Delegazione evento: impostando il parametro useCapture di addEventListener() su 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>
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