HTMLElement.
Donne le focus à un élément, par ex. un champ de formulaire, pour qu’il reçoive immédiatement le clavier. La méthode blur() retire le focus.
- Renvoie
undefined
Exemple
#const email = document.querySelector('#email')
email.focus()
console.log(document.activeElement === email)
console.log(document.activeElement.id)
email.blur()
console.log(document.activeElement === document.body)true email true
Cet exemple ne s’exécute pas dans l’aperçu, car il déplacerait le focus de cette page vers le cadre de l’exemple. Sur une page avec un champ <input id="email">, il affiche le résultat montré ci-dessus. Après blur(), le focus revient au document, et document.activeElement indique <body>.
Définition et utilisation
#La méthode focus() donne le focus à l’élément, c’est-à-dire qu’elle fait en sorte qu’il reçoive les frappes du clavier. Un champ de texte avec le focus affiche un curseur clignotant, et un bouton avec le focus réagit à Entrée et à la barre d’espace. La méthode blur() fait l’inverse et retire le focus. Vous lisez l’élément qui a actuellement le focus avec document.activeElement.
Peuvent recevoir le focus les éléments interactifs : les champs de formulaire, les boutons, les liens avec un attribut href, et les éléments avec un attribut tabindex. Appeler focus() sur un simple div ou un titre ne fera rien, sauf si vous lui ajoutez tabindex="-1". Un tel élément peut être activé depuis le code, mais il n’entre pas dans l’ordre de parcours de la touche Tab.
Lors d’un changement de focus, l’élément reçoit les événements focus et blur, qui ne bouillonnent pas, ainsi que focusin et focusout, qui bouillonnent et se prêtent à la délégation. Par défaut, le navigateur fait défiler la page pour que l’élément avec le focus soit visible. L’option preventScroll: true désactive ce défilement.
Un usage réfléchi de focus() améliore l’accessibilité : après l’ouverture d’une boîte de dialogue, donnez le focus à son premier champ ; après sa fermeture, revenez sur le bouton qui l’a ouverte ; et après l’échec de l’envoi d’un formulaire, indiquez le premier champ en erreur. Ne déplacez cependant pas le focus sans raison claire, car les personnes qui utilisent le clavier et les lecteurs d’écran perdent alors leurs repères.
Syntaxe
#element.focus()
element.focus(options)
element.blur()
document.activeElementParamètres
#options
objet, optionnel
preventScroll: truedéfinit le focus sans faire défiler la page jusqu’à l’élément.
Plus d’exemples
#const reply = document.querySelector('#reply')
const comment = document.querySelector('#comment')
reply.addEventListener('click', () => comment.focus())
comment.addEventListener('focus', () => console.log('Champ de commentaire actif'))
comment.addEventListener('blur', () => console.log('Champ de commentaire inactif'))
console.log('Élément actif :', document.activeElement)Au départ, c’est le document lui-même, donc <body>, qui a le focus. Cliquez sur « Répondre », et le focus passera au champ de commentaire. Cliquez ensuite à côté du champ pour voir l’événement blur.
const heading = document.querySelector('#lesson-title')
heading.setAttribute('tabindex', '-1')
heading.focus({ preventScroll: true })
console.log(document.activeElement.tagName)
console.log(heading.tabIndex)H2 -1
Sur une page avec un titre <h2 id="lesson-title">, celui-ci ne reçoit normalement pas le focus. tabindex="-1" permet de l’activer depuis le code, par ex. après le chargement d’une nouvelle leçon, afin qu’un lecteur d’écran lise immédiatement son titre. L’élément n’entre pas pour autant dans l’ordre de la touche Tab.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Après l’ouverture d’une boîte de dialogue, donnez-lui le focus, et après sa fermeture, revenez sur le bouton qui l’a ouverte. Les personnes qui utilisent le clavier ne perdront alors pas leur place sur la page.
- Pour déléguer les événements de focus, utilisez
focusinetfocusout. Les événementsfocusetblurne bouillonnent pas vers les parents. - Définissez l’apparence du focus en CSS avec
:focus-visible. Le contour apparaîtra lors de la navigation au clavier, et non à chaque clic de souris.
Entrées associées
#- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
- Element.scrollIntoView()Fait défiler la page et les conteneurs défilants pour que l’élément apparaisse à l’écran, par un saut ou en douceur.
- Element.setAttribute()Définit la valeur d’un attribut HTML d’un élément, ou en ajoute un nouveau.
- Event.targetL’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
- Element.toggleAttribute()Ajoute un attribut s’il est absent, ou le retire s’il est présent. Particulièrement utile pour les attributs booléens, comme hidden ou disabled.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.