Erfassen Sie das Tastendruckereignis (oder das Tastendruckereignis) für das DIV-Element

146

Wie fängt man das Tastendruck- oder Tastendruckereignis auf einem DIV-Element ab (mit jQuery)?

Was ist erforderlich, um das DIV-Element fokussieren zu können?

Lalchand
quelle
2
Was bedeutet "Fokus" für einen Div?
Jonathon Faust
1
jboyd außer wenn Sie einen Tabindex haben, können Sie Javascript verwenden, um ihn zu finden und die Fokusmethode darauf aufzurufen.
Brendan Enrick
2
@Lalchand ... kannst du meine Antwort irgendwann akzeptieren? :)
Helle

Antworten:

301

(1) Legen Sie das tabindexAttribut fest:

<div id="mydiv" tabindex="0" />

(2) An Keydown binden:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

So legen Sie den Fokus auf den Start:

$(function() {
   $('#mydiv').focus();
});

Um den Fokusrand zu entfernen, wenn Sie ihn nicht mögen div, legen Sie ihn outline: noneim CSS fest.

Weitere Möglichkeiten finden Sie in der Tabelle der SchlüsselcodeskeyCode .

Der gesamte Code setzt voraus, dass Sie jQuery verwenden.

#
helle
quelle
43
+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
Vinícius Negrão
6

Hier ein Beispiel für einfaches JS:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})
#myDiv {
  outline: none;
}
<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Илья Зеленько
quelle
Wie beantwortet dies die Frage?
Poul Bak
5

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.

Verwenden von Jquery

Verwenden von JavaScript

nkshio
quelle
1
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
MikeT