recherche

Maison >interface Web >js tutoriel >Puis-je utiliser la fonction `focus()` de JavaScript sur un `` élément ?

Puis-je utiliser la fonction `focus()` de JavaScript sur un `` élément ?

DDD
DDDoriginal
2024-11-05 04:50:02543parcourir

Can I Use JavaScript's `focus()` Function on a `` Element?

Se concentrer sur un
Élément utilisant JavaScript

Question :

Est-il possible de se concentrer sur un

élément avec la fonction JavaScript focus() ?

Contexte :

Un

élément est utilisé :

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

Et une tentative est faite pour se concentrer sur cet élément

avec le code :

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

Cependant, le focus n'est pas appliqué.

Réponse :

Oui, il est possible de se concentrer sur un

élément en utilisant la fonction focus(). L'étape clé consiste à attribuer un attribut tabindex au
 :

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

Un tabindex de 0 place la balise dans l'ordre de tabulation naturel de la page. Des nombres plus élevés attribuent un ordre de priorité spécifique, 1 étant le premier, 2 le deuxième, et ainsi de suite.

De plus, un tabindex de -1 fait que le

focalisable uniquement via des scripts, et non par des actions de l'utilisateur.

Voici un exemple de code illustrant ceci :

<code class="javascript">document.getElementById('tries').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>

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 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：Comment puis-je parcourir de grands tableaux de manière asynchrone en JavaScript pour préserver la réactivité de l'interface utilisateur ?Article suivant：Comment puis-je parcourir de grands tableaux de manière asynchrone en JavaScript pour préserver la réactivité de l'interface utilisateur ?

Articles Liés

Voir plus