Welche HTML-Elemente können fokussiert werden?

248

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.

Paul Turner
quelle

Antworten:

337

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.

Bobince
quelle
2
Ich habe einige interessante Ergebnisse gefunden: jsfiddle.net/B7gn6 schlägt mir vor, dass das Attribut "tabindex" nicht ausreicht, um zumindest in Chrome zu funktionieren.
Jon z
19
Dass das tabindex-Attribut "es Autoren ermöglicht, zu steuern, ob ein Element fokussierbar sein soll", ist in HTML5 standardisiert: w3.org/TR/html5/… Grundsätzlich macht ein Wert von 0 das Element fokussierbar, überlässt seine Reihenfolge jedoch dem Browser .
Natevw
7
Alle Elemente mit element.isContentEditable === truesind auch fokussierbar. Beachten Sie, dass IE -10 (11+?) Jedes Element mit Anzeigeblock oder Tabelle (div, span usw.) fokussieren kann.
Mems
14
Ein Element mit einem Tabindex von -1 kann programmgesteuert durch die Fokusmethode den Fokus erhalten. Es kann einfach nicht mit Registerkarten versehen werden.
Jessebeach
5
… Es sei denn, der Tabindex ist -1, was eine Fokussierung unmöglich macht >> nicht wahr, wenn Tabindex -1 ist, ist eine Fokussierung durch KLICKEN möglich, aber eine Fokussierung durch Drücken der Tabulatortaste ist nicht möglich. -1 macht ein Element fokussierbar, nur wird es nicht in der Tabulatorreihenfolge hinzugefügt. Siehe: jsfiddle.net/0jz0kd1a , versuchen Sie zuerst, auf das Element zu klicken, ändern Sie dann tabindex in 0 und versuchen Sie, die Registerkarte zu verwenden.
Daremkd
37

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.

ReeCube
quelle
@TWiStErRob - Ihr Selektor zielt nicht auf dieselben Elemente ab wie die Selektoren von @ ReeCube, da Ihr Selektor keine Elemente enthält, für die kein Tabindex explizit festgelegt wurde. Zum Beispiel <a href="foo.html">Bar</a>ist es sicherlich fokussierbar, weil es ein aElement ist, das ein hrefAttribut hat. Ihr Selektor enthält es jedoch nicht.
jbyrd
@jbyrd, das war nur ein Aufruf zur Bearbeitung, basierend auf der Aussage von Bobince: "... es sei denn, der Tabindex ist -1, was eine Fokussierung unmöglich macht.", sollte er niemals die Antwort von ReeCube ersetzen. Siehe den Bearbeitungsverlauf.
TWiStErRob
SASS (oder CSS) ist ein geeignetes Formular, um die obige Frage genau zu beantworten (mit Ausnahme von Browser-Inkonsistenzen).
Roy Tinker
tabindex="-1"ist nicht ein Element unfocusable machen, es kann einfach nicht von der Tabulatortaste fokussiert werden. Es kann weiterhin Fokus erhalten, indem Sie darauf klicken oder programmgesteuert mit HTMLElement.focus(); Gleiches gilt für jede andere negative Zahl. Siehe: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Lazzaro
Ich würde Artikel mit tabindex-1 nicht ausschließen. Benutzer können nicht über Eingabegeräte fokussieren, aber Sie möchten diesen Fokus möglicherweise programmgesteuert festlegen und trotzdem anzeigen.
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])';

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.
Dustin
quelle
-2

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

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

Barreto Freekhealer
quelle
6
": focus" bedeutet, dass das Element derzeit fokussiert ist und nicht, dass es fokussierbar ist
jwebb