Wie erreiche ich die Pfeiltasten Navigation zwischen divs

Ich denke, dass Sie Javascript benötigen und die Verwendung eines Plugins ist eine einfachere Möglichkeit, um die Aufgabe zu erfüllen. und pflegen die browserübergreifende Funktionalität. Aber hier ist eine Geige , die, glaube ich, irgendwie nur mit Javascript funktioniert. Es definiert zusätzliche Attribute für Ihre ausgewählten Elemente und verwendet eine onkeydown-Funktion, um die Navigation zwischen den Elementen zu handhaben.

Hier ist das neue HTML, das die zusätzlichen Elemente enthält:

Dieser Code ist sehr spezifisch für das dargestellte Problem und obwohl es das Problem lösen könnte, wäre es wahrscheinlich besser, ein allgemeines Plugin zu verwenden, das eine allgemeinere Anwendung in Ihrer Umgebung ermöglicht. Sie können auch Probleme im Zusammenhang mit dem, was Ihr Benutzer erwartet, die nach unten und oben Pfeiltasten tun, im Vergleich zu dem, was Sie tun, indem sie abfangen.

Nach meiner Erfahrung ist es zu Problemen gekommen, bei denen verschiedene Browser und sogar verschiedene Endbenutzerplattformen ein anderes Verhalten der Anwendung aufweisen, was die Konsistenz der Implementierung beeinträchtigt. Viele der Plugins wurden entwickelt, um diese Inkonsistenz zu beseitigen und eine sauberere, intuitivere Benutzeroberfläche zu bieten.

  

Alternativ ... Gibt es eine Möglichkeit, eine Mehrfachauswahl mit den Optionen vorzunehmen, die mit Kontrollkästchen versehen sind, um den Auswahlstatus jeder Option widerzuspiegeln?

Das hat multi-browser support? Nicht wirklich. Wenn Sie jedoch ein " Es funktioniert in Chrome, es ist ein Schiff! " -Typ Dev, dann könnten Sie total multi select fälschen, um Kontrollkästchen zu haben, die den Auswahlstatus jeder Option mit widerspiegeln gute alte ' CSS .

Zuerst unser HTML:

Weiter, dat CSS:

Mit generated content haben wir nun unsere pseudo checkboxes angewendet. Fügen wir das letzte Bit von CSS hinzu, um uns einen richtigen selected -Zustand zu geben!

Woop.

Hier ist eine Geige zum Spielen: Ссылка

In ( begrenzten ) Tests schien dies nur in Chrome und FireFox zu funktionieren (beide aktuell unter OSX). Safari, IE und Opera ignorierten den generierten Inhalt alle zusammen. Also, obwohl nicht praktikabel (zumindest nicht heute), ist es etwas machbar!

(Hier ist eine andere Geige ohne background-image - erfordert ein bisschen mehr Arbeit, um das Aussehen / Gefühl für alle Browser konsistent zu halten: Ссылка Aber zeigt die Verwendung von unicode , um eine "Checkbox" in einem Multi-Select zu fälschen ...)

Ich glaube nicht, dass Sie einen Weg mit reinem HTML & amp finden; CSS - das geht zu weit in die Anpassung der Kernfunktionalität, also sollte ein bisschen JavaScript den Trick machen (ich benutze auch jQuery, um es etwas einfacher zu machen).

Für meinen Test habe ich <label> anstelle von <div> verwendet, um die Kontrollkästchen zu umbrechen, aber diese Idee gilt auch für divs. Ich bevorzuge nur Labels, wenn JavaScript nicht geladen wird, sind die Checkboxen immer noch anklickbar.

Grundsätzlich müssen Sie die Tasten des Benutzers und eine "aktive" Eingabe verfolgen. Suchen Sie nach den Aufwärts- / Abwärtspfeiltasten und ändern Sie die aktive Eingabe basierend darauf (blättern Sie dorthin, fügen Sie einen Klassennamen für das Styling hinzu). Ich habe es auch erlaubt, die Leertaste zu aktivieren / deaktivieren Sie die gerade aktive Box.

jsFiddle Beispiel: Ссылка