La méthode HTMLElement.focus() donne le focus à l'élément spécifié, s'il peut prendre le focus.

Syntaxe

element.focus();
element.focus(focusOption); // Paramêtre objet

Paramètres

focusOptions Facultatif
Est un objet ayant les propriétés suivantes:
preventScroll Facultatif
Est une valeur Boolean:
  • Si false, la méthode fera défiler la page pour que l'élément soit visible à l'écran.
  • Si true,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.

Exemples

Donner le focus à un champ texte

JavaScript

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

HTML

<input type="text" id="myTextField" value="Champ texte.">
<p></p>
<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au champ texte!</button>

Résultat

Donner le focus à un bouton

JavaScript

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

HTML

<button type="button" id="myButton">Cliquez!</button>
<p></p>
<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au bouton!</button>

Résultat

Focus avec option

JavaScript

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

HTML

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

<div id="container" style="height: 1000px; width: 1000px;"> 
<button type="button" id="myButton" style="margin-top: 500px;">Cliquez!</button>
</div>

Résultat

Spécification

Specification Status Comment
HTML Living Standard
La définition de 'focus' dans cette spécification.
Standard évolutif  
HTML 5.1
La définition de 'focus' dans cette spécification.
Recommendation  
HTML5
La définition de 'focus' dans cette spécification.
Recommendation  
Document Object Model (DOM) Level 2 HTML Specification
La définition de 'focus' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 1 Specification
La définition de 'focus' dans cette spécification.
Obsolete  

Notes

Si vous appelez HTMLElement.focus() à partir d'un gestionnaire d'événement mousedown, vous devez appeler event.preventDefault() pour empêcher le focus de quitter l'HTMLElement.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox Edge Internet Explorer Opera Safari (WebKit)
Support basique (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
focusOptions 64 Pas de support Pas de support Pas de support 51 Pas de support
Fonctionnalité Android Webview Chrome for Android Firefox Mobile Edge mobile IE mobile Opera Android Safari iOS
Support basique (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)  
focusOptions 64 64 Pas de support Pas de support Pas de support 51 Pas de support

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, vava, fscholz, teoli, jsx, tregagnon, BenoitL
Dernière mise à jour par : a-mt,