Welche HTML-Elemente können fokussiert werden?

Ich suche nach einer endgültigen Liste von HTML-Elementen, die fokussiert werden dürfen, dh welche Elemente werden fokussiert, wenn sie focus()aufgerufen werden?

Ich schreibe eine jQuery-Erweiterung, die mit Elementen arbeitet, die in den Fokus gerückt werden können. Ich hoffe, dass die Antwort auf diese Frage es mir ermöglicht, die Elemente, auf die ich abziele, genau zu definieren.

Es gibt keine definitive Liste, es liegt am Browser. Der einzige Standard, den wir haben, ist DOM Level 2 HTML , wonach 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()HTMLElement, aber ein Element wird erst dann richtig fokussiert, wenn es eines der folgenden Elemente ist:

• HTMLAnchorElement / HTMLAreaElement mit einem href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, jedoch nicht mit disabled(IE gibt tatsächlich einen Fehler aus, wenn Sie es versuchen), und Datei-Uploads weisen aus Sicherheitsgründen ein ungewöhnliches Verhalten auf
• HTMLIFrameElement (obwohl das Fokussieren nichts Nützliches bringt). Andere Einbettungselemente habe ich vielleicht auch nicht alle getestet.
• Jedes Element mit a tabindex

Abhängig vom Browser gibt es wahrscheinlich andere subtile Ausnahmen und Ergänzungen zu diesem Verhalten.

Hier habe ich einen CSS-Selektor basierend auf bobince ‚s Antwort jedes fokussierbarem HTML - Element zu wä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 etwas 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, da ich genau danach gesucht habe, als Google mich zu dieser Stackoverflow-Frage weitergeleitet hat.

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

[contentEditable=true]

Dies wird jedoch sehr selten verwendet.

$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 dachte, dies könnte aufgrund des Google-Ranges dieser Frage jemandem helfen.

Ein paar Dinge zu beachten:

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

Die Eingabehilfenbibliothek von ally.js bietet hier eine inoffizielle, testbasierte Liste:

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

(NB: Auf ihrer Seite steht nicht, wie oft Tests durchgeführt wurden.)

Vielleicht kann dieser helfen:

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

Rückgabewert: true = Erfolg, false = fehlgeschlagen

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

Die Auswahl: focus ist für Elemente zulässig, die Tastaturereignisse oder andere Benutzereingaben akzeptieren.

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