HTMLElement.focus()

options Facultatif

Un objet optionnel qui fournit les options permettant de contrôler les aspects du focus. Cet objet peut contenir les propriétés suivantes :

preventScroll Facultatif

Un booléen qui indique si le navigateur devrait défiler jusqu'à ce que l'élément qui a reçu le focus soit visible. S'il vaut false (la valeur par défaut), le navigateur défilera jusqu'à ce que l'élément soit visible après lui avoir donné le focus. Si preventScroll vaut true, aucun défilement n'aura lieu.

JavaScript

focusMethod = function getFocus() {
  document.getElementById("monChampTexte").focus();
};

HTML

<input type="text" id="monChampTexte" value="Champ texte." />
<p></p>
<button type="button" onclick="focusMethod()">
  Cliquez ici pour placer le focus sur le champ texte !
</button>

Résultat

JavaScript

focusMethod = function getFocus() {
  document.getElementById("monBouton").focus();
};

HTML

<button type="button" id="monBouton">Je suis un bouton !</button>
<p></p>
<button type="button" onclick="focusMethod()">
  Cliquez ici pour donner le focus au bouton !
</button>

Résultat

JavaScript

focusScrollMethod = function getFocus() {
  document.getElementById("monBouton").focus({ preventScroll: false });
};
focusNoScrollMethod = function getFocusWithoutScrolling() {
  document.getElementById("monBouton").focus({ preventScroll: true });
};

HTML

<button type="button" onclick="focusScrollMethod()">
  Cliquez ici pour passer le focus au bouton !
</button>
<button type="button" onclick="focusNoScrollMethod()">
  Cliquez ici pour passer le focus au bouton sans défilement !
</button>

<div id="container" style="height: 1000px; width: 1000px;">
  <button type="button" id="monBouton" style="margin-top: 500px;">
    Je suis un bouton Me!
  </button>
</div>

Résultat

• Si HTMLElement.focus() est appelé depuis un gestionnaire d'évènement pour mousedown, il faut appeler event.preventDefault() pour empêcher le focus de quitter l'élément HTMLElement.
• Le comportement du focus par rapport aux fonctionnalités HTML comme tabindex ou le shadow dom, qui était auparavant trop peu spécifié, a été mis à jour en octobre 2019. Voir le blog WHATWG pour plus d'informations.

• HTMLElement.blur() qui permet de retirer le focus d'un élément.
• document.activeElement qui permet de savoir quel élément a actuellement le focus.
• L'évènement focusin qui est déclenché lorsqu'un élément est sur le point de recevoir le focus.
• L'évènement focusout qui est déclenché lorsqu'un élément est sur le point de perdre le focus.