recherche

Maison >interface Web >js tutoriel >Comment se concentrer sur un élément `` à l'aide de la fonction `focus()` de JavaScript ?

Comment se concentrer sur un élément `` à l'aide de la fonction `focus()` de JavaScript ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-05 13:04:02228parcourir

How to Focus on a `` Element Using JavaScript's `focus()` Function?

Capacité de se concentrer sur un
Utilisation de la fonction focus() de JavaScript

Question originale :

Est-il possible de se concentrer sur un

élément en utilisant la fonction focus() de JavaScript ?

Détails supplémentaires :

Je vise à cibler les éléments

élément utilisant focus() :

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

Cependant, en invoquant document.getElementById('tries').focus(); ne parvient pas à accomplir cette tâche. Quelqu'un peut-il fournir des conseils pour résoudre ce problème ?

Réponse :

En attribuant un attribut tabindex, vous pouvez obtenir la mise au point souhaitée sur un fichier

tag.

Implémentation :

<code class="html"><div tabindex="0">Hello World</div></code>

La définition de tabindex sur 0 intègre la balise dans l'ordre de tabulation inhérent à la page, 0 représentant le premier élément de la séquence. Des valeurs plus élevées indiquent un ordre de priorité, dans lequel 1 est prioritaire sur 2 et ainsi de suite.

Vous pouvez également attribuer un tabindex de -1 pour limiter la capacité de focus aux scripts, rendant l'élément inaccessible à l'interaction de l'utilisateur.

Exemple :

<code class="javascript">document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};</code>
<code class="css">div:focus {
    background-color: Aqua;
}</code>
<code class="html"><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">Set Focus To Element Z</div></code>

En incorporant ces techniques, vous pouvez manipuler habilement le focus de votre

éléments, permettant un contrôle transparent sur les interactions des utilisateurs et l'accessibilité.

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 using Attribute function this issue
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：Comment obtenir la hauteur d'une division en JavaScript pur : clientHeight vs offsetHeightArticle suivant：Comment obtenir la hauteur d'une division en JavaScript pur : clientHeight vs offsetHeight

Articles Liés

Voir plus