HTMLElement.focus()
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
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
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
Spécifications
Specification |
---|
HTML Standard # 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
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.