Puis-je utiliser la fonction `focus()` de JavaScript sur un `` élément ?-js tutoriel-php.cn

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 :

élément est utilisé :

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

Copier après la connexion

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

avec le code :

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

<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>

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：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：Pourquoi une boucle While bloque-t-elle la boucle d'événement dans Node.js ?

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