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.
- Si
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
- La méthode DOM
HTMLElement.blur()
pour retirer le focus. document.activeElement
pour savoir quel élément a actuellement le focus.