Wie erfasse ich ein Tastendruck- (oder Keydown-) Ereignis für ein div-Element?

Lesezeit: 3 Minuten

Benutzeravatar von Lalchand
Lachhand

Wie fangen Sie das Keypress- oder Key-Down-Ereignis für ein DIV-Element (mit jQuery) ab?

Was ist erforderlich, um dem DIV-Element den Fokus zu geben?

  • Was bedeutet “Fokus” für ein Div?

    – Jonathan Faust

    30. Juni 2010 um 12:57 Uhr

  • jboyd außer mit der Tabulatortaste, wenn es einen Tabindex hat, können Sie Javascript verwenden, um es zu finden und die Focus-Methode darauf aufzurufen.

    – Brendan Enrick

    30. Juni 2010 um 12:57 Uhr

  • @Lalchand … kannst du meine Antwort irgendwann akzeptieren? 🙂

    – hell

    3. Oktober 2016 um 13:41 Uhr

Benutzeravatar von helle
hell

(1) Stellen Sie die ein tabindex Attribut:

<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 setzen Sie den Fokus auf Start:

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

Zum Entfernen – wenn es Ihnen nicht gefällt – die div Fokusgrenze, eingestellt outline: none im CSS.

Siehe die Tabelle von Schlüsselcodes für mehr keyCode Möglichkeiten.

Der gesamte Code unter der Annahme, dass Sie jQuery verwenden.

#

  • +1 tabindex ist hier der entscheidende Punkt, um das div “auswählbar” zu machen. JQuery ist nicht erforderlich, dasselbe funktioniert sowohl mit Angular als auch (nehme ich an) mit einfachen Javascript-Ereignissen.

    – Jukka Dahlbom

    12. Februar 2014 um 10:57 Uhr


  • Was ist die Browserunterstützung dafür?

    – bekanntasilya

    19. November 2014 um 20:06 Uhr

  • tabindex ist ein Schlüsselteil, aber setzen Sie ihn nicht auf einen anderen Wert als “0”. Etwas über 0 zu machen, wird Screenreader für sehbehinderte Benutzer durcheinander bringen (es wird alles auf der Seite überspringen und direkt zu jedem tabindex über 0 gehen). tabindex=”0″ macht es “tabbelbar”. Sie können unendliche Elemente mit tabindex=”0″ haben

    – Zonabi

    29. Februar 2016 um 18:26 Uhr


  • Funktioniert auch mit

    !
                    
                    
    – dfmiller
    15. März 2016 um 15:45 Uhr
  • Exzellent! Mir fehlte das Tabindex-Attribut, vielleicht weil DIVs keinen Fokus erhalten können, es sei denn, sie haben einen Tabindex. Danke, Mann! Mein Leben gerettet! EDIT: funktioniert auch mit React
    – Vinicius Negrão
    16. Februar 2017 um 19:31 Uhr

Benutzeravatar von Илья Зеленько
Илья Зеленько

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>

  • Ich würde eine verwenden tabindex="-1" da "Tastaturereignisse werden nur von ,