Tabindex Fokus Stile

Ich habe eine div Tabbable mit dem tabindex Attribut gemacht, um versteckten Inhalt zugänglich zu machen.Tabindex Fokus Stile

Momentan, wenn mit der Maus geklickt wird, erhält der div Browser :focus Styling.

Gibt es eine Möglichkeit, das tabellierbare Element nur mit Fokus-Styling zu haben, wenn über die Tastatur auf zugegriffen wird? Ein Ankerelement hat dies standardmäßig.

Div mit tabindex='0' bekommt Browser Fokus Stile auf Maus und Tastatur Interaktion
Anchor Browser nur

Ich möchte den div Fokus Stile auf Tastatursteuerung erhält den Anker zu emulieren. Es zu verankern ist leider keine Option.

Jede Hilfe wäre toll, ich bin wirklich ratlos.

Bearbeiten -> Hier ist ein Beispiel: http://jsfiddle.net/LvXyL/2/

Quelle

2012-04-20 Henry Hoffman

FWIW: Es sieht so aus, als ob das Verhalten, das Sie beschreiben, tatsächlich Browser-abhängig ist: In Chrome erhält div den Fokus-Stil auf Maus/Tastatur, aber nur auf der Tastatur verankern, wie Sie beschreiben; aber im IE, bekommen * beide * das Fokusrechteck entweder auf der Maus oder der Tastatur; währenddessen in Firefox, erhalten Sie weder die Fokuskontur * bis * die Tastatur in diesem Rahmen verwendet wird, und danach erhalten beide den Fokusumriss für Maus oder Tastatur! – BrendanMcK

-1

Wenn Sie Javascript verwenden können, versuchen Verwendung onclick Attribut.

onclick="this.blur()" für verlorene Fokus

onclick="this.focus()" für Satz Fokus

Beispiel, wo DIV auf Klick den Fokus verloren und A Fokus http://jsfiddle.net/LvXyL/6/

Nachteil gesetzt ist sichtbar Fokus Stil, wenn Sie Maustaste für eine längere halten Zeit.

Quelle

2012-04-20 12:32:45 kubedan

Danke für die Antwort, das ist ziemlich nahe, aber der Fokus bleibt auf der Maus und beim Klicken und Ziehen des Elements. –

Die Verwendung von this.blur() wird nicht empfohlen, da dies die korrekte Verwendung der Tastatur beeinträchtigt. Klicken Sie auf ein tabbierbares div * sollte den Fokus dort setzen, aber mit this.blur() verhindert dies. – BrendanMcK

Sicher nur fügen Sie die Pseudo-Klasse: Fokus zum div, und style. Ich empfehle, Umriss vs Grenze zu verwenden. Ich habe die Geige aktualisiert.

div:focus {outline: blue solid 2px;}

Kub schlug eine JS-Lösung, aber warum js verwenden, wenn Sie nicht wirklich brauchen?

Quelle

2012-04-20 12:36:58

Weil er Fokus nur per Tastatur nicht per Maus einstellen möchte. – kubedan

und was passiert, wenn der Benutzer JS ausgeschaltet hat? Dieser Ansatz umfasst Maus und Tastatur. –

Wenn JS aus ist, funktioniert meine Lösung natürlich nicht. – kubedan

Tabindex Fokus Stile

Antwort

Verwandte Themen