Evento onblur

Eventi DOM FocusEvent

Definizione e uso

L'evento onblur si verifica quando un oggetto perde il fuoco.

L'evento onblur viene utilizzato più spesso con il codice di convalida del modulo (ad esempio, quando l'utente lascia un campo del modulo).

Suggerimento: L'evento onblur è simile a Evento onfocusal contrario.

Suggerimento: L'evento onblur è simile a Evento onfocusout.La principale differenza è che l'evento onblur non bolle. Pertanto, se desideri determinare se un elemento o uno dei suoi figli ha perso il fuoco, puoi utilizzare l'evento onfocusout. Ma puoi utilizzare l'evento onblur del Metodo addEventListener()per farlo tramite il parametro useCapture (opzionale).

Esempio

Esegui JavaScript quando l'utente lascia il campo di input:

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

Prova personalmente

Più esempi TIY in fondo alla pagina.

Sintassi

In HTML:

<element onblur="myScript">

Prova personalmente

In JavaScript:

oggetto.onblur = function(){}myScript};

Prova personalmente

Usare il metodo addEventListener() in JavaScript:

oggetto.addEventListener("blur", myScript);

Prova personalmente

Nota:Internet Explorer 8 o versioni precedenti non supportano Metodo addEventListener().

Dettagli tecnici

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

Supporto del browser

Evento Chrome IE Firefox Safari Opera
onblur Supporto Supporto Supporto Supporto Supporto

Più esempi

Esempio

Utilizzare insieme gli eventi "onblur" e "onfocus":

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

Prova personalmente

Esempio

Delegazione degli eventi: impostare 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 personalmente

Esempio

Delegazione degli eventi: utilizzare 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 personalmente

Eventi DOM FocusEvent