web-dev-qa-db-fra.com

tabindex en CSS

Est-il possible de contrôler tabindex avec CSS et si oui, quels navigateurs le supportent et sur quels éléments?

[~ # ~] modifier [~ # ~]

Je dois dire que mon objectif est d'attraper les événements de keydown sur une div. J'ai vu cette page http://www.quirksmode.org/js/events/keys.html# qui teste les événements du clavier et montre que la seule façon dont la touche est déclenchée sur autre chose que le document et le corps ou une sorte d'élément de formulaire ou de lien doit avoir un tabindex déclaré dessus. Mais j'ai lu sur le site du W3C:

Les éléments suivants prennent en charge l'attribut tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT et TEXTAREA.

Je suis donc un peu confus, que faire pour être conforme aux normes et faire fonctionner mon cas d'utilisation?

EDIT2

Mon cas d'utilisation est un div avec beaucoup de contenu avec une barre de défilement artificielle. Je peux le faire défiler avec les événements de la souris mais pas de chance avec le clavier jusqu'à présent.

htmlcsskeydown
45
Boris Hamanov

Mise à jour 2017

Comme l'a souligné @Wallop dans les commentaires, le nav-index la propriété était supprimée de la spécification en 2015 en raison du "manque d'intérêt pour la mise en œuvre".

Jetez un œil au nav-index propriété introduite par W3C dans CSS3-UI .

Cette propriété a exactement le même comportement qu'un tabindex et s'applique à n'importe quel élément.

La propriété "nav-index" est un moyen neutre pour la méthode d'entrée de spécifier l'ordre de navigation séquentiel (également appelé "ordre de tabulation"). Cette propriété remplace l’attribut HTML4/XHTML1 ‘tabindex’

Étant probablement la meilleure solution conforme aux normes pour le cas d'utilisation, nav-index n'est interprété que par Opera jusqu'à présent (en juin 2012) et est également marqué comme "Feature at risk" par le W3C, donc peut être supprimé à tout moment.

Les autres solutions multi-navigateurs sont:

  • non conforme aux normes: définissez l'attribut tabindex sur un DIV. Cela fonctionnera dans tous les navigateurs courants.

  • conforme aux normes: remplacez DIV par un élément d'ancrage (A) sans jeu d'attributs href, stylisez-le avec display: block et ajoutez l'attribut tabindex.

En ce qui concerne le point de BoltClock, je conviens que l'ordre de tabulation est très logique (à la fois l'ordre de sélection du texte et l'ordre de tabulation sont étroitement liés à la séquence dans laquelle les éléments sont disposés dans le document). D'un autre côté, CSS a un objectif plus large aujourd'hui. Il peut manipuler non seulement le contenu d'un document (propriété content) mais aussi le comportement quand et si des événements doivent être déclenchés: c'est-à-dire en utilisant pointer-events, display ou z-index l'ordre de l'événement du pointeur va changer. S'il s'agit de propriétés CSS très basiques, pourquoi ne devriez-vous pas également pouvoir influencer KeyBoardEvents?

28
daluege

C'est un peu vieux mais maintenant il y a des options css comme -moz-user-focus. Je suis sûr qu'il existe un équivalent de webkit.

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

7
Noitidart