Comment puis-je utiliser la fonction focus() de JavaScript pour rendre un DIV focalisable ?

DIV focalisables à l'aide de la fonction focus() de JavaScript

Bien que la fonction focus() opère généralement sur des éléments de formulaire tels que les champs de saisie ou les boutons, elle est également possible de se concentrer sur un

élément. Pour y parvenir, il est nécessaire d'attribuer un attribut tabindex au div.

Attribuer un Tabindex

<br><div id="tries" tabindex="0">Il vous reste 3 essais</div><br>

Un tabindex de 0 place le div dans l'ordre de tabulation naturel de la page. Les valeurs positives spécifient une priorité spécifique dans l'ordre de tabulation. Pendant ce temps, une valeur de -1 rend le div focalisable uniquement via un script, et non via une entrée de l'utilisateur.

Exemple de code

<br>document.getElementById( 'test').onclick = function () {<pre class="brush:php;toolbar:false">document.getElementById('scripted').focus();

};

Ce script montre la définition du focus sur un div avec un tabindex de -1 via un événement déclenché par l'utilisateur.

DIV axés sur le style

Pour indiquer visuellement les focus, CSS peut être utilisé :

<br>div:focus {<pre class="brush:php;toolbar:false">background-color: Aqua;

}

En mettant en œuvre ces techniques, vous pouvez vous concentrer avec succès sur

éléments utilisant la fonction focus() de JavaScript, améliorant l'accessibilité et l'expérience utilisateur de votre application Web.

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!