web-dev-qa-db-fra.com

Quels éléments HTML peuvent recevoir le focus?

Je recherche une liste définitive d’éléments HTML autorisés à prendre le focus, c’est-à-dire quels éléments le seront lorsque l’appel à focus() est fait?

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 de préciser les éléments que je cible.

htmlfocus
220
Paul Turner

Il n'y a pas de liste définitive, c'est au navigateur. Le seul standard dont nous disposons est DOM niveau 2 HTML , selon lequel les seuls éléments ayant une méthode focus() sont HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement et HTMLAnchorElement. Cela omet notamment HTMLButtonElement et HTMLAreaElement.

Les navigateurs actuels définissent focus() sur HTMLElement, mais un élément ne prend réellement le focus que s'il est l'un des éléments suivants:

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

Selon le navigateur, il y aura probablement d'autres exceptions et ajouts subtils à ce comportement.

302
bobince

Ici, j'ai un sélecteur CSS basé sur bobince 's answer pour sélectionner un élément HTML activable:

  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 le 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 peut être mis au point:

[contentEditable=true]

Cependant, ceci est utilisé très rarement.

29
ReeCube

La bibliothèque ally.js accessibility fournit une liste non officielle, basée sur des tests, ici: 

https://allyjs.io/data-tables/focusable.html

(NB: leur page ne dit pas à quelle fréquence les tests ont été effectués.)

5
ling
$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"]) en :not([tabindex^="-"]) car il est parfaitement plausible de générer -2 d'une manière ou d'une autre. Mieux vaut prévenir que guérir non?
  • Ajouter :not([tabindex^="-"]) à tous les autres sélecteurs activables est totalement inutile. Lorsque vous utilisez [tabindex]:not([tabindex^="-"]), il inclut déjà tous les éléments avec lesquels vous souhaitez nier :not!
  • J'ai inclus :not([disabled]) car les éléments désactivés peuvent jamais être focalisables. Encore une fois, il est inutile de l'ajouter à chaque élément.
3
Dustin