Événement onfocusout

Événements DOM FocusEvent

Définition et utilisation

L'événement onfocusout se produit lorsque l'élément est sur le point de perdre le focus.

Astuce : L'événement onfocusout est similaire à Événement onblur.La principale différence réside dans le fait que l'événement onblur ne bubbling pas. Par conséquent, si vous souhaitez déterminer si un élément ou l'un de ses éléments enfants perd le focus, vous devez utiliser l'événement onfocusout.

Astuce :Bien que Firefox ne prenne pas en charge l'événement onfocusout, vous pouvez utiliser le gestionnaire d'événement de capture sur l'événement onblur (en utilisant le paramètre optionnel useCapture de la méthode addEventListener()) pour savoir si les éléments enfants de l'élément perdent le focus.

Astuce : L'événement onfocusout est similaire à Événement onfocusinAu contraire.

Exemple

Exemple 1

Exécutez du JavaScript lorsque le champ de saisie est sur le point de perdre le focus :

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

Essayez-le vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Syntaxe

Dans HTML :

<element onfocusout="myScript">

Essayez-le vous-même

En JavaScript (peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+):

object.onfocusout = function(){myScript};

Essayez-le vous-même

En JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("focusout", myScript);

Essayez-le vous-même

Commentaire :Internet Explorer 8 ou versions antérieures ne prennent pas en charge : Méthode addEventListener().

Détails techniques

Bubbling : Support
Annulable : Non pris en charge :
Types d'événements : FocusEvent
Étiquettes HTML prises en charge : 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

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cet événement pleinement.

Événement Chrome IE Firefox Safari Opera
onfocusout Support Support 52.0 Support Support

Commentaire :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 doit être utilisé en tant que propriété HTML et avec la méthode addEventListener() (voir les exemples de syntaxe ci-dessous).

Plus d'exemples

Exemple 2

Utilisation conjointe des événements "onfocusin" et "onfocusout" :

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Essayez-le vous-même

Exemple 3

Délegation d'événement : définir le paramètre useCapture de addEventListener() sur true (utilisé pour focus et 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-le vous-même

Exemple 4

Délegation 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>

Essayez-le vous-même

Événements DOM FocusEvent