Tabstop für ein Element (Ankerlink) in HTML verhindern

152

Ist es möglich, <a href="...">das Tabstoppen eines Tabs in einem beliebigen Browser abzubrechen ? Ich würde dies gerne ohne Javascript machen.

html anchor tabstop Robert Koritnik
quelle

Antworten:

265

Einige Browser unterstützen das tabindex="-1"Attribut, aber nicht alle, da dies kein Standardverhalten ist.

Roberto Aloi
quelle
22
Oh toll! Vielen Dank! Ich habe mit FF3.5, IE8 und CH3 nachgesehen und es funktioniert in allen drei. Tausend Dank!
Robert Koritnik
1
Keine Sorgen über diese: wie zzzzBov heißt es hier , kam HTML5 zur Rettung und standardisiert diese Funktionalität. Jetzt sind die schuldigen Browser diejenigen, die dies vermissen.
TechNyquist
1
Beachten Sie, dass das Deaktivieren des Tabstops in einem Hyperlink gegen die Barrierefreiheitsregeln verstößt (z. B. Personen, die Bildschirmleseprogramme verwenden usw.). Wenn Sie wissen, dass dies kein Problem für Ihre Benutzerbasis ist, sollte es in Ordnung sein.
Ricardo Sanchez
73

Moderne, HTML5-kompatible Browser unterstützen das [tabindex]Attribut , wobei ein Wert von -1verhindert, dass das Element mit Registerkarten versehen wird.

Wenn der Wert eine negative Ganzzahl ist
Der Benutzeragent muss zulassen, dass das Element fokussiert wird, darf jedoch nicht zulassen, dass das Element mithilfe der sequentiellen Fokusnavigation erreicht wird.

zzzzBov
quelle
1
Dokumentationsauszüge helfen immer. ;-) Dies sagt uns, dass diejenigen, die dies nicht unterstützen, zu den wenigen gehören und sie es wahrscheinlich früher oder später unterstützen werden.
Robert Koritnik
15

Sie können einen JQuery-Handler auf das Element anwenden, auf das Sie mehrere Elemente ohne Tabulatorstopp ausrichten möchten.

$(document).ready(function () {
    $('.class').attr('tabindex', '-1');
});

Wäre eine Möglichkeit, es zu tun ....

dtharpe
quelle
6

Ich denke, Sie könnten dies mit Javascript tun, Sie überschreiben das window.onkeypressoder onkeydown, fangen die Tabulatortaste ab und setzen den Fokus auf die gewünschte Reihenfolge.

Ammosi
quelle
2
Ich weiß nicht, ob Sie andere Antworten überprüft haben, insbesondere eine, die vor etwa einem Jahr beantwortet wurde, und dieses Problem ohne Verwendung von Javascript gelöst haben .
Robert Koritnik
2
Ich schätze die alternative Lösung, auch wenn sie nicht sowohl das OP als auch die akzeptierte Antwort anspricht. Keine Notwendigkeit, herabzusetzen.
Anthony DiSanti
@Anthony DiSanti: Das stimmt, aber in diesem speziellen Fall sehe ich immer noch nicht, warum man auf Javascript zurückgreifen sollte, wenn etwas anderes besser funktioniert? Wenn es also keine Antwort auf diese Frage ist, warum ist es dann hier? Keine Ursache. Javascript ist normalerweise der letzte Schritt, den man unternehmen würde, wenn bestimmte Dinge nicht anders gemacht werden können. Und es tut mir leid @Ammosi, wenn ich dich beleidigt habe. Ich wollte nicht unhöflich sein. Danke für die späte Antwort.
Robert Koritnik
7
Ich bin damit einverstanden, Javascript zu vermeiden, wenn es eine standardbasierte HTML- oder CSS-Lösung gibt. In diesem Fall gibt es dies jedoch nicht. Das Originalposter musste vor IE8 und FF3.5 keine Browser unterstützen, aber für meine Arbeit muss ich wieder IE6 unterstützen. Die Tabindex-Lösung ist daher nicht anwendbar. Es sollte nicht entmutigt werden, die einzige funktionierende Lösung im Browser mit dem größten Marktanteil bereitzustellen.
Anthony DiSanti
4

Entfernen Sie das hrefAttribut aus Ihrem Ankertag

CodeDreamer68
quelle
Was ist, wenn ich nicht kann?
Hakan Fıstık
Wenn Sie bereit sind, Javascript trotz der Frage zu verwenden, um diese Art von Lösungen zu vermeiden, um href-Attribute zu entfernen, verwenden Sie jquery document onload mit so etwas wie$('[href="whatever-the-url-is"]').removeAttr('href');
Jonas Lundman
6
LOL entfernen Sie die href
quemeful