HTMLElement.focus()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La méthode HTMLElement.focus() place le focus sur l'élément indiqué, s'il peut recevoir le focus. L'élément qui a le focus sera celui qui recevra par défaut les évènements du clavier et les autres évènements analogues.

Syntaxe

focus();
focus(options);

Paramètres

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.

Exemples

Placer le focus sur un champ texte

JavaScript

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

HTML

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

Placer le focus sur un bouton

JavaScript

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

HTML

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

Utiliser le paramètre d'option

JavaScript

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

HTML

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

Spécifications

Specification
HTML Standard # dom-focus-dev

Notes

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.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

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.