+1 Tabindex ist hier der entscheidende Punkt, um das Div 'auswählbar' zu machen. JQuery nicht erforderlich, dasselbe funktioniert sowohl mit Angular als auch (ich nehme an) mit einfachen Javascript-Ereignissen.
Jukka Dahlbom
4
Was ist die Browserunterstützung dafür?
bekannt als
27
tabindex ist ein Schlüsselelement, aber setzen Sie es nicht auf einen anderen Wert als "0". Wenn Sie einen Wert über 0 festlegen, werden Bildschirmleser für sehbehinderte Benutzer durcheinander gebracht (alles auf der Seite wird übersprungen und direkt zu einem Tabindex über 0 weitergeleitet). tabindex = "0" macht es "tabbable". Sie können unendlich viele Elemente mit tabindex = "0"
zonabi
2
Funktioniert auch mit <pre>!
dfmiller
2
Ausgezeichnet! Mir fehlte das tabindex-Attribut, vielleicht weil DIVs keinen Fokus erhalten können, wenn sie keinen tabindex haben. Danke, Mann! Rettete mein Leben! EDIT: funktioniert auch mit React
Das HTML-Attribut tabindex gibt an, ob sein Element fokussiert werden kann und ob / wo es an der sequentiellen Tastaturnavigation teilnimmt (normalerweise mit der TabTaste). Lesen Sie die MDN-Webdokumente als vollständige Referenz.
Ich fand dies tatsächlich auf der Suche nach einem Problem mit dem Auslösen des Focusout-Ereignisses, als die Steuerelemente auf dem Div den Fokus verloren, z. B. auf die Divs-Bildlaufleiste zu klicken. Das einfache Hinzufügen des Tabstops zum Div war die Lösung. Vielen Dank
Antworten:
(1) Legen Sie das
tabindex
Attribut fest:(2) An Keydown binden:
So legen Sie den Fokus auf den Start:
Um den Fokusrand zu entfernen, wenn Sie ihn nicht mögen
div
, legen Sie ihnoutline: none
im CSS fest.Weitere Möglichkeiten finden Sie in der Tabelle der Schlüsselcodes
keyCode
.Der gesamte Code setzt voraus, dass Sie jQuery verwenden.
#quelle
Hier ein Beispiel für einfaches JS:
quelle
Das HTML-Attribut tabindex gibt an, ob sein Element fokussiert werden kann und ob / wo es an der sequentiellen Tastaturnavigation teilnimmt (normalerweise mit der
Tab
Taste). Lesen Sie die MDN-Webdokumente als vollständige Referenz.Verwenden von Jquery
Code-Snippet anzeigen
Verwenden von JavaScript
Code-Snippet anzeigen
quelle