Element : évènement focusin

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

En savoir plus
Voir la compatibilité complète

L'évènement focusin se déclenche lorsqu'un élément a reçu la sélection, après l'évènement focus. Les deux évènements diffèrent, car focusin se propage, tandis que focus ne le fait pas.

L'opposé de focusin est l'évènement focusout, qui se déclenche lorsque l'élément a perdu la sélection.

L'évènement focusin 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("focusin", (event) => { })

onfocusin = (event) => { }

HTML

html

<form id="formulaire">
  <label>
    Du texte&nbsp;:
    <input type="text" placeholder="saisir du texte" />
  </label>
  <label>
    Mot de passe&nbsp;:
    <input type="password" placeholder="mot de passe" />
  </label>
</form>

JavaScript

const formulaire = document.getElementById("formulaire");

formulaire.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

formulaire.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});