Comment puis-je rendre un élément `` focalisable en JavaScript ?-js tutoriel-php.cn

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

Mary-Kate Olsen

Libérer： 2024-11-05 11:04:02

original

996 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!

Article précédent：Pourquoi « 0 » est-il évalué comme vrai dans une instruction if mais faux dans une comparaison ? Article suivant：Protocole TCP ou UDP

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2784

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2919

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2437

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...