--- title: HTMLElement.focus() slug: Web/API/HTMLOrForeignElement/focus tags: - API - HTML DOM - HTMLElement translation_of: Web/API/HTMLOrForeignElement/focus original_slug: Web/API/HTMLElement/focus ---
{{ APIRef("HTML DOM") }}

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 {{optional_inline}} {{experimental_inline}}
Est un objet ayant les propriétés suivantes:
preventScroll {{optional_inline}}
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

{{ EmbedLiveSample('Focus_on_a_text_field') }}

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

{{ EmbedLiveSample('Focus_on_a_button') }}

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

{{ EmbedLiveSample('Focus_prevent_scroll') }}

Spécification

Specification Status Comment
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}} {{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}} {{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}} {{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}} {{Spec2('DOM1')}}

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

{{Compat("api.HTMLElement.focus")}}

Voir aussi