it-swarm.com.de

Welche HTML-Elemente können den Fokus erhalten?

Ich suche nach einer definitiven Liste von HTML-Elementen, die den Fokus erhalten dürfen, d. H. Welche Elemente werden in den Fokus gestellt, wenn focus() für sie aufgerufen wird?

Ich schreibe eine jQuery-Erweiterung, die an Elementen arbeitet, die in den Fokus gerückt werden können. Ich hoffe, die Antwort auf diese Frage wird mir erlauben, die Elemente, auf die ich abziele, genau zu beschreiben.

220
Paul Turner

Es gibt keine eindeutige Liste, es liegt am Browser. Der einzige Standard, den wir haben, ist DOM Level 2 HTML , nach dem die einzigen Elemente, die eine focus()-Methode haben, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement und HTMLAnchorElement sind. Dadurch werden insbesondere HTMLButtonElement und HTMLAreaElement weggelassen.

Heutige Browser definieren focus() für HTMLElement, aber ein Element wird nur dann fokussiert, wenn es eines der folgenden Elemente ist:

  • HTMLAnchorElement/HTMLAreaElement mit einer href
  • HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement, jedoch nicht mit disabled (IE gibt Ihnen tatsächlich einen Fehler, wenn Sie es versuchen), und das Hochladen von Dateien weist aus Sicherheitsgründen ein ungewöhnliches Verhalten auf
  • HTMLIFrameElement (obwohl das Fokussieren nichts Nützliches bewirkt). Andere Einbettungselemente vielleicht auch, ich habe sie nicht alle getestet.
  • Jedes Element mit einer tabindex

Abhängig vom Browser gibt es wahrscheinlich weitere geringfügige Ausnahmen und Ergänzungen zu diesem Verhalten.

302
bobince

Hier habe ich einen CSS-Selektor basierend auf bobince s answer , um jedes fokussierbare HTML-Element auszuwählen:

  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 */
  }

oder ein bisschen schöner in 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 */
    }
}

Ich habe es als Antwort hinzugefügt, weil es das war, wonach ich gesucht hatte, als Google mich auf diese Stackoverflow-Frage umleitete.

EDIT: Es gibt einen weiteren Selektor, der fokussierbar ist:

[contentEditable=true]

Dies wird jedoch sehr selten verwendet.

29
ReeCube

Die Bibliothek ally.js accessibility enthält eine inoffizielle, testbasierte Liste: 

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

(NB: Ihre Seite sagt nicht aus, wie oft Tests durchgeführt wurden.)

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])';

Ich erstelle eine SCSS-Liste aller fokussierbaren Elemente, und ich dachte, dies könnte jemandem helfen, aufgrund des Google-Rank dieser Frage.

Ein paar Dinge zu beachten:

  • Ich habe :not([tabindex="-1"]) in :not([tabindex^="-"]) geändert, da es absolut plausibel ist, -2 irgendwie zu generieren. Besser sicher als Entschuldigung, richtig?
  • Das Hinzufügen von :not([tabindex^="-"]) zu allen anderen fokussierbaren Selektoren ist völlig sinnlos. Wenn Sie [tabindex]:not([tabindex^="-"]) verwenden, enthält es bereits alle Elemente, die Sie mit :not negieren würden!
  • Ich habe :not([disabled]) aufgenommen, weil deaktivierte Elemente niemals fokussierbar sein können. Es ist also sinnlos, es zu jedem einzelnen Element hinzuzufügen.
3
Dustin

Vielleicht kann dieser helfen:

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

rückgabewert: true = Erfolg, false = fehlgeschlagen

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

0