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
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. SipreventScroll
vauttrue
, aucun défilement n'aura lieu.
Exemples
Placer le focus sur un champ texte
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
must be provided
Placer le focus sur un bouton
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
must be provided
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
<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 pourmousedown
, il faut appelerevent.preventDefault()
pour empêcher le focus de quitter l'élémentHTMLElement
. - 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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focus | ||||||||||||
options.focusVisible parameter | ||||||||||||
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.