Element : évènement focus
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 focus se déclenche lorsqu'un élément reçoit la sélection. L'évènement ne se propage pas, mais l'évènement focusin qui suit se propage.
L'évènement opposé de focus est l'évènement blur, qui se déclenche lorsque l'élément perd la sélection.
L'évènement focus ne peut pas être annulé.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.
addEventListener("focus", (event) => { })
onfocus = (event) => { }
Type d'évènement
Un objet FocusEvent. Hérite de UIEvent et de Event.
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 focusin, ou en définissant le paramètre useCapture de addEventListener() à 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-focus |
| HTML # handler-onfocus |
Compatibilité des navigateurs
Voir aussi
- La méthode
HTMLElement.focus() - Les évènements associés :
blur,focusin,focusout - Cet évènement sur
Windowcible : l'évènementfocus - Sélection : focus/blur (angl.)