Quels éléments HTML peuvent recevoir le focus?

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.

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.

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.

$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.

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

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

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

Peut-être que celui-ci peut aider:

function focus(el){
	el.focus();
	return el==document.activeElement;
}

valeur de retour: vrai = succès, faux = échoué

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Le sélecteur: focus est autorisé sur les éléments qui acceptent des événements de clavier ou d'autres entrées utilisateur.

http://www.w3schools.com/cssref/sel_focus.asp