简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

DDD
Libérer： 2024-11-05 04:50:02
original
492 Les gens l'ont consulté

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

source：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：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
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
0
2
1780
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
0
10
1926
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
0
1
1639
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...
Depuis 2024-04-18 23:52:34
0
1
1547
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1580
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！