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?
Wie erfasse ich ein Tastendruck- (oder Keydown-) Ereignis für ein div-Element?
Lesezeit: 3 Minuten
Илья Зеленько
Lachhand
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
!– dfmiller15. 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ão16. Februar 2017 um 19:31 Uhr
Илья Зеленько
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,
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