<video>
Altri manuali di riferimento
CSSStyleDeclaration
Evento onfocusout: Conversione dei tipi JS Evento onblurCorso opzionale
Evento onfocusout:Corso raccomandato:
Evento onfocusout: Evento onfocusout simile a Evento onfocusin. La principale differenza è che l'evento onblur non si propaga. Pertanto, se si desidera determinare se un elemento o uno dei suoi elementi figli perde il fuoco, si dovrebbe utilizzare l'evento onfocusout.
Nonostante Firefox non supporti l'evento onfocusout, è possibile determinare se un elemento figlio perde il fuoco utilizzando un listener di cattura dell'evento onblur (utilizzando il parametro opzionale useCapture del metodo addEventListener()).
Suggerimento:
Evento onfocusout con
All'opposto.
Esempio
Esempio 1
Esegue JavaScript quando il campo di input sta per perdere il fuoco:
<input type="text" onfocusout="myFunction()">Più esempi TIY in basso nella pagina. Sintassi.addEventListener("focusout",In HTML:
<
In JavaScript (potrebbe non funzionare come previsto in Chrome, Safari e Opera 15+):element.addEventListener("focusout",onfocusout="
">
In JavaScript (potrebbe non funzionare come previsto in Chrome, Safari e Opera 15+):object .addEventListener("focusout",myScript
Nota:); Internet Explorer 8 o versioni precedenti non supportanoMetodo addEventListener()
.
| Dettagli tecnici: | Supporta |
|---|---|
| Bubbling: | Cancellabile: |
| Non supportato: | FocusEvent |
| Etichette HTML supportate: | Tutti gli elementi HTML, eccetto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title> |
| Versione DOM: | Eventi di Livello 2 |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'evento.
| Evento | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Supporta | Supporta | 52.0 | Supporta | Supporta |
Nota:L'evento onfocusout 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 riportati di seguito).
Più esempi
Esempio 2
Utilizzo contemporaneo degli eventi "onfocusin" e "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
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>
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>
