recherche

Maison >interface Web >js tutoriel >Comment puis-je rendre un élément `` focalisable en JavaScript ?

Comment puis-je rendre un élément `` focalisable en JavaScript ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-05 11:04:02977parcourir

How Can I Make a `` Element Focusable in JavaScript?

Accès au focus sur

Éléments via JavaScript

Malgré la focalisation inhérente de certains éléments (tels que les entrées et les boutons), il n'est pas nativement possible de se concentrer sur un

élément utilisant la fonction JavaScript focus().

Attribution d'un TabIndex

Pour activer le focus sur un

, il faut lui attribuer un attribut tabindex, qui détermine sa position dans l'ordre de tabulation de la page. L'attribution d'un tabindex de 0 permet à l'élément d'être focalisé par l'utilisateur ou via JavaScript.

<code class="html"><div id="tries" tabindex="0">You have 3 tries left</div></code>

Définition du focus avec JavaScript

Après avoir attribué le tabindex, l'élément peut être ciblé par programme à l'aide de la fonction focus() :

<code class="javascript">document.getElementById('tries').focus();</code>

Considérations

  • Un tabindex de -1 rend l'élément focalisable uniquement via JavaScript, et non interaction de l'utilisateur.
  • Les éléments pouvant être focalisés peuvent recevoir des événements de clavier et un style lors du focus (par exemple, changer la couleur d'arrière-plan).
  • Évitez d'attribuer un tabindex à des éléments qui ne devraient pas être focalisables par l'utilisateur pour des raisons d'accessibilité.

Exemple

L'exemple suivant montre l'attribution du focus et un repère visuel :

<code class="html"><style>
div:focus {
    background-color: Aqua;
}
</style>

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>

<div id="test" onclick="document.getElementById('scripted').focus();">Set Focus To Element Z</div></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript for using Attribute function position background
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Pourquoi « 0 » est-il évalué comme vrai dans une instruction if mais faux dans une comparaison ?Article suivant：Pourquoi « 0 » est-il évalué comme vrai dans une instruction if mais faux dans une comparaison ?

Articles Liés

Voir plus