Element : évènement blur
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement blur est déclenché lorsqu'un élément perd la sélection. L'évènement ne se propage pas, mais l'évènement focusout qui suit se propage.
Un élément perd la sélection si un autre élément est sélectionné.
Un élément perd également la sélection si un style qui n'autorise pas la sélection est appliqué, comme hidden, ou si l'élément est retiré du document — dans ces deux cas, la sélection se déplace vers l'élément body (zone d'affichage).
Notez que le comportement des navigateurs diffère lorsque un élément sélectionné est retiré du document. Dans les navigateurs basés sur Chromium, retirer un élément sélectionné déclenche un évènement blur, tandis que dans Firefox, ce n'est pas le cas.
L'opposé de blur est l'évènement focus, qui est déclenché lorsque l'élément a reçu la sélection.
L'évènement blur n'est pas annulable.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("blur", (event) => { })
onblur = (event) => { }
Type d'évènement
Un objet FocusEvent. Hérite de UIEvent et Event.
Propriétés de l'évènement
Cette interface hérite également des propriétés de son parent UIEvent, et indirectement de Event.
-
L'élément recevant la sélection, le cas échéant.
Exemples
Exemple simple
HTML
<form id="formulaire">
<label>
Du texte :
<input type="text" placeholder="saisir du texte" />
</label>
<label>
Mot de passe :
<input type="password" placeholder="mot de passe" />
</label>
</form>
JavaScript
const motDePasse = document.querySelector('input[type="password"]');
motDePasse.addEventListener("focus", (event) => {
event.target.style.background = "pink";
});
motDePasse.addEventListener("blur", (event) => {
event.target.style.background = "";
});
Résultat
Délégation d'évènement
Il existe deux façons de mettre en œuvre la délégation d'évènement pour cet évènement : en utilisant l'évènement focusout, ou en définissant le paramètre useCapture de addEventListener() sur true.
HTML
<form id="formulaire">
<label>
Du texte :
<input type="text" placeholder="saisir du texte" />
</label>
<label>
Mot de passe :
<input type="password" placeholder="mot de passe" />
</label>
</form>
JavaScript
const formulaire = document.getElementById("formulaire");
formulaire.addEventListener(
"focus",
(event) => {
event.target.style.background = "pink";
},
true,
);
formulaire.addEventListener(
"blur",
(event) => {
event.target.style.background = "";
},
true,
);
Résultat
Spécifications
| Spécification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
Compatibilité des navigateurs
La valeur de Document.activeElement varie selon les navigateurs pendant que cet évènement est traité (bogue Firefox 452307 (angl.)) : IE10 la définit sur l'élément qui reçoit la sélection, tandis que Firefox et Chrome la définissent souvent sur le body du document.
Voir aussi
- La méthode
HTMLElement.blur() - Évènements associés :
focus,focusin,focusout - Cet évènement pour
Windowcible : l'évènementblur - Sélection : focus/blur (angl.)