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.

* Some parts of this feature may have varying levels of support.

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

js
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

js
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

must be provided

Placer le focus sur un bouton

JavaScript

js
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

must be provided

Utiliser le paramètre d'option

JavaScript

js
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

must be provided

Spécifications

Specification
HTML
# 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focus
options.focusVisible parameter
Experimental
options.preventScroll parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

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.