Exemple
Exécuter un script JavaScript lorsqu'un champ d'entrée est sur le point de perdre le focus:
<input type="text"
onfocusout="myFunction()"> Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
L'événement onfocusout se produit lorsqu'un élément est sur le point de perdre le focus.
Astuce: L'événement onfocusout est similaire à l' onblur événement. La principale différence est que l'événement onblur ne bouillonne pas. Par conséquent, si vous voulez savoir si un élément ou son enfant perd le focus, vous devez utiliser l'événement onfocusout.
Conseil: Bien que Firefox ne supporte pas l'événement onfocusout, vous pouvez savoir si un enfant d'un élément perd le focus ou non, à l'aide d' un écouteur de capture pour le onblur événement ( en utilisant le paramètre optionnel useCapture du addEventListener() méthode).
Tip: L'événement est onfocusout à l'opposé de l' onfocusin événement.
Support du navigateur
| un événement | |||||
|---|---|---|---|---|---|
| onfocusout | Oui | Oui | Non supporté | Oui | Oui |
Note: L'événement onfocusout peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+ en utilisant la syntaxe HTML JavaScript DOM. Cependant, il devrait fonctionner comme un attribut HTML et en utilisant la addEventListener() méthode.
Syntaxe
En HTML:
< Essayez vous - même » JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusout=function(){ Essayez vous - même » En JavaScript, en utilisant la addEventListener() méthode:
object .addEventListener("focusout", myScript );
Essayez vous - même » Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Oui |
|---|---|
| cancelable: | Non |
| Type d'événement: | FocusEvent |
| Pris en charge les balises HTML: | Tous les éléments HTML, SAUF: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
| DOM Version: | Niveau 2 Événements |
autres exemples
Exemple
En utilisant "onfocusin" ainsi que le "onfocusout" l' événement:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Essayez vous - même » Exemple
Délégation de l' événement: régler le paramètre useCapture de addEventListener() true (for focus and blur) au (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>
Essayez vous - même » Exemple
délégation de l'événement: utiliser l'événement focusIn (non pris en charge par 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>
Essayez vous - même » <Object Event