Ich bin auf der Suche nach einer definitiven Liste von HTML-Elementen, die Fokus haben dürfen, d. H. Welche Elemente werden in den Fokus gesetzt, wenn aufgerufen wird?Welche HTML-Elemente können den Fokus erhalten?
Ich schreibe eine jQuery Erweiterung, die auf Elemente arbeitet, die in den Fokus gebracht werden können. Ich hoffe, die Antwort auf diese Frage wird es mir ermöglichen, mich über die Elemente, auf die ich abziele, zu äußern.
Es gibt keine definitive Liste, es liegt am Browser. Der einzige Standard, den wir haben, ist DOM Level 2 HTML, nach dem die einzigen Elemente, die eine -Methode haben, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement und HTMLAnchorElement sind. Dies lässt insbesondere HTMLButtonElement und HTMLAreaElement aus.
Browser Heute definieren focus() auf Htmlelement, sondern ein Element den Fokus nicht wirklich nehmen, wenn es sich um ein ist: mit
disabled (IE gibt Ihnen tatsächlich einen Fehler, wenn Sie versuchen), und Datei-Uploads haben aus Sicherheitsgründen ungewöhnliches Verhaltentabindex... es sei denn, der tabindex-1 ist, was unmöglich konzentrieren macht.
Es gibt wahrscheinlich weitere subtile Ausnahmen und Ergänzungen zu diesem Verhalten je nach Browser.
Hier habe ich einen CSS-Selektor basierend auf bobince ‚s answer jedes fokussierbare 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 ein wenig 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 hinzugefügt habe es als Antwort, denn das war, wonach ich gesucht hatte, als Google mich auf diese Stackoverflow-Frage umgeleitet hat.
EDIT: Es gibt einen weiteren Selektor, die fokussierbar ist:
[contentEditable=true]
Dies ist jedoch nur sehr selten verwendet wird.
@TWiSteRRob - Ihr Selektor zielt nicht auf dieselben Elemente wie die Selektoren von @ ReeCube ab, da Ihr Element keine Elemente enthält, für die kein Tabindex explizit festgelegt wurde. Zum Beispiel ist 'Bar' sicherlich fokussierbar, weil es ein 'a' Element ist, das ein' href' Attribut hat. Aber Ihr Selektor enthält es nicht. – jbyrd
@jbyrd, das war nur ein Aufruf zur Bearbeitung basierend auf Bobince's Aussage: "... außer der Tabindex ist -1, was den Fokus unmöglich macht.", Sollte er niemals ReeCubes Antwort ersetzen; Siehe den Bearbeitungsverlauf. – TWiStErRob
SASS (oder CSS) ist eine geeignete Form, um eine rigorose Antwort auf die obige Frage zu geben (ohne Browser-Inkonsistenzen). –
Der Fokus-Selektor ist für Elemente zulässig, die Tastaturereignisse oder andere Benutzereingaben akzeptieren.
": focus" bedeutet, dass das Element derzeit fokussiert ist, nicht dass es fokussierbar ist – jwebb
$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 bin eine SCSS Liste aller aktivierbaren Elemente zu schaffen, und ich dachte, das jemand aufgrund dieser Googles Frage Rang helfen könnte.
Ein paar Dinge zu beachten:
:not([tabindex="-1"])-:not([tabindex^="-"]) geändert, weil es durchaus plausibel ist -2 irgendwie zu erzeugen. Lieber sicher als leid, oder?: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 negieren würden mit :not!:not([disabled]) enthalten, weil deaktivierte Elemente niemals fokussierbar sein können. Es ist also wiederum sinnlos, sie jedem einzelnen Element hinzuzufügen.Die ally.js Zugänglichkeit Bibliothek bietet eine inoffizielle, Test-basierte Liste hier:
https://allyjs.io/data-tables/focusable.html
(NB: Die Seite sagt nicht, wie oft Tests durchgeführt wurden.)
Jede Idee Wie bekommt man all das mit jQuery? Siehe auch http://stackoverflow.com/questions/7668525/is-there-a-jquery-selector-to-get-all-elements-that-can-get-focus – ripper234
Ich fand einige interessante Ergebnisse: http: // jsfiddle.net/B7gn6/ schlägt mir vor, dass die "tabindex" attrib ist nicht genug, um in Chrome mindestens zu arbeiten .. –
@jon: diese Tabindex-Elemente tatsächlich akzeptieren Fokus, obwohl, wenn Sie versuchen, sie zu klicken. Das Testen von '.is (': focus')' ist nicht zuverlässig - jQuery implementiert einen eigenen Test für ': focus' in Chrome, was Sie hier testen. Dieser jQuery-Code ist unzuverlässig/fehlerhaft ('~ tabIndex' ..?! Das wird nicht funktionieren ...) – bobince