Evento onfocusout
Esempio
Esegui un JavaScript quando un campo di input sta per perdere lo stato attivo:
<input type="text"
onfocusout="myFunction()">
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
L'evento onfocusout si verifica quando un elemento sta per perdere lo stato attivo.
Suggerimento: l'evento onfocusout è simile all'evento onblur . La differenza principale è che l'evento onblur non fa bolle. Pertanto, se vuoi scoprire se un elemento o il suo figlio perde il focus, dovresti usare l'evento onfocusout.
Suggerimento: l'evento onfocusout è l'opposto dell'evento onfocusin .
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'evento.
Event | |||||
---|---|---|---|---|---|
onfocusout | Yes | Yes | 52.0 | Yes | Yes |
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 il metodo addEventListener() (vedere gli esempi di sintassi di seguito).
Sintassi
In HTML:
<element onfocusout="myScript">
In JavaScript (potrebbe non funzionare come previsto in Chrome, Safari e Opera 15+):
object.onfocusout = function(){myScript};
In JavaScript, utilizzando il metodo addEventListener():
object.addEventListener("focusout", myScript);
Nota: il metodo addEventListener() non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
Bolle: | sì |
---|---|
Annullabile: | No |
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: | Eventi di livello 2 |
Altri esempi
Esempio
Utilizzando "onfocusin" insieme all'evento "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Esempio
Delega eventi: impostazione del parametro useCapture di addEventListener() su true (per focus e sfocatura):
<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
Delega di eventi: utilizzando l'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>