Quels éléments HTML peuvent recevoir le focus?


248

Je suis à la recherche d'une liste définitive des éléments HTML qui sont autorisés à prendre le focus, c'est-à-dire quels éléments seront mis au point quand focus()on les appellera?

J'écris une extension jQuery qui fonctionne sur des éléments qui peuvent être mis en évidence. J'espère que la réponse à cette question me permettra d'être précis sur les éléments que je cible.

Réponses:


337

Il n'y a pas de liste définitive, c'est au navigateur. La seule norme que nous avons est le DOM niveau 2 HTML , selon lequel les seuls éléments qui ont une focus()méthode sont HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement et HTMLAnchorElement. Cela omet notamment HTMLButtonElement et HTMLAreaElement.

Les navigateurs d'aujourd'hui se définissent focus()sur HTMLElement, mais un élément ne prendra réellement le focus que s'il s'agit de:

  • HTMLAnchorElement / HTMLAreaElement avec un href
  • HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement mais pas avec disabled(IE vous donne en fait une erreur si vous essayez), et les téléchargements de fichiers ont un comportement inhabituel pour des raisons de sécurité
  • HTMLIFrameElement (bien que le concentrer ne fasse rien d'utile). D'autres éléments d'intégration également, peut-être, je ne les ai pas tous testés.
  • Tout élément avec un tabindex

Il existe probablement d'autres exceptions et ajouts subtils à ce comportement en fonction du navigateur.


2
J'ai trouvé des résultats intéressants: jsfiddle.net/B7gn6 me suggère que l'attribut "tabindex" n'est pas suffisant pour fonctionner dans Chrome au moins ..
Jon z

19
Que l'attribut tabindex "permet aux auteurs de contrôler si un élément est censé être focusable" est standardisé dans HTML5: w3.org/TR/html5/… Fondamentalement, une valeur de 0 rend l'élément focusable mais laisse son ordre au navigateur .
natevw

7
Tous les éléments avec element.isContentEditable === truesont également focalisables. Notez que IE -10 (11+?) Peut focaliser n'importe quel élément avec un bloc d'affichage ou une table (div, span, etc.).
mems

14
Un élément avec un tabindex de -1 peut recevoir le focus par programme via la méthode focus; il ne peut tout simplement pas être tabulé.
jessebeach

5
… À moins que le tabindex soit -1, ce qui rend le focus impossible >> faux, si tabindex est -1, le focus par CLIC est possible, mais le focus en appuyant sur "tab" est impossible. -1 rend un élément focalisable, mais il n'est pas ajouté dans l'ordre de tabulation. Voir: jsfiddle.net/0jz0kd1a , essayez d'abord de cliquer sur l'élément, puis changez tabindex en 0 et essayez d'utiliser tab.
daremkd

37

Ici, j'ai un sélecteur CSS basé sur la réponse de Bobince pour sélectionner n'importe quel élément HTML focalisable:

  a[href]:not([tabindex='-1']),
  area[href]:not([tabindex='-1']),
  input:not([disabled]):not([tabindex='-1']),
  select:not([disabled]):not([tabindex='-1']),
  textarea:not([disabled]):not([tabindex='-1']),
  button:not([disabled]):not([tabindex='-1']),
  iframe:not([tabindex='-1']),
  [tabindex]:not([tabindex='-1']),
  [contentEditable=true]:not([tabindex='-1'])
  {
      /* your CSS for focusable elements goes here */
  }

ou un peu plus beau dans SASS:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}

Je l'ai ajouté comme réponse, car c'était ce que je cherchais, lorsque Google m'a redirigé vers cette question Stackoverflow.

EDIT: Il y a un autre sélecteur, qui est focalisable:

[contentEditable=true]

Cependant, cela est utilisé très rarement.


@TWiStErRob - votre sélecteur ne cible pas les mêmes éléments que les sélecteurs de @ ReeCube, car le vôtre n'inclut pas d'éléments qui n'ont pas de tabindex explicitement défini. Par exemple, il <a href="foo.html">Bar</a>est certainement focalisable car c'est un aélément qui a un hrefattribut. Mais votre sélecteur ne l'inclut pas.
2015

@jbyrd qui n'était qu'un appel à modification basé sur la déclaration de bobince: "… à moins que le tabindex ne soit -1, ce qui rend le focus impossible.", il n'a jamais été censé remplacer la réponse de ReeCube; voir l'historique des modifications.
TWiStErRob

SASS (ou CSS) est un formulaire approprié pour fournir une réponse rigoureuse à la question ci-dessus (sauf les incohérences du navigateur).
Roy Tinker

tabindex="-1"ne rend pas un élément flou, il ne peut tout simplement pas être focalisé par tabulation. Il peut toujours recevoir le focus en cliquant dessus ou par programme avec HTMLElement.focus(); idem pour tout autre nombre négatif. Voir: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Lazzaro

Je n'exclurais pas les éléments avec tabindex-1. Les utilisateurs ne pourront pas se concentrer via aucun périphérique d'entrée, mais vous souhaiterez peut-être définir et afficher ce focus par programme.
James Westgate

7
$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

Je crée une liste SCSS de tous les éléments focalisables et j'ai pensé que cela pourrait aider quelqu'un en raison du classement Google de cette question.

Quelques points à noter:

  • J'ai changé :not([tabindex="-1"])pour :not([tabindex^="-"])car il est parfaitement plausible de générer en -2quelque sorte. Mieux vaut prévenir que guérir, non?
  • L'ajout :not([tabindex^="-"])à tous les autres sélecteurs focalisables est complètement inutile. Lorsque vous l'utilisez, [tabindex]:not([tabindex^="-"])il inclut déjà tous les éléments avec lesquels vous seriez en train de nier :not!
  • J'ai inclus :not([disabled])parce que les éléments désactivés ne peuvent jamais être focalisés. Encore une fois, il est inutile de l'ajouter à chaque élément.



En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.