Événement onfocusout
Exemple
Exécutez un JavaScript lorsqu'un champ de saisie est sur le point de perdre le focus :
<input type="text"
onfocusout="myFunction()">
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L'événement onfocusout se produit lorsqu'un élément est sur le point de perdre le focus.
Conseil : L'événement onfocusout est similaire à l' événement onblur . La principale différence est que l'événement onblur ne bouillonne pas. Par conséquent, si vous souhaitez savoir si un élément ou son enfant perd le focus, vous devez utiliser l'événement onfocusout.
Astuce : L'événement onfocusout est l'opposé de l' événement onfocusin .
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'événement.
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
Remarque : L'événement onfocusout peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+ en utilisant la syntaxe JavaScript HTML DOM. Cependant, il devrait fonctionner comme un attribut HTML et en utilisant la méthode addEventListener() (Voir les exemples de syntaxe ci-dessous).
Syntaxe
En HTML :
<element onfocusout="myScript">
En JavaScript (peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+) :
object.onfocusout = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("focusout", myScript);
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Oui |
|---|---|
| Annulable : | Non |
| Type d'événement: | FocusEvent |
| Balises HTML compatibles : | TOUS les éléments HTML, SAUF : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
| Version DOM : | Événements de niveau 2 |
Plus d'exemples
Exemple
Utilisation de "onfocusin" avec l'événement "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Exemple
Délégation d'événement : définition du paramètre useCapture de addEventListener() sur true (pour le focus et le flou) :
<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>
Exemple
Délégation d'événement : utilisation de l'événement 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>