Utilia
Kategorien ▾
Sprache: de ▾

Tastencode-Finder für JavaScript

Drücken Sie eine Taste und sehen Sie event.key, event.code, keyCode, which und location in JavaScript – mit Modifikatoren, Tastenverlauf und Keycode-Tabelle.

Klicken Sie auf „Tastenerfassung starten“ oder in das Feld unten und drücken Sie dann eine beliebige Taste. Klicken Sie außerhalb des Felds, um die Tastatur wieder an die Seite zurückzugeben.

event.key Taste drücken keyCode – Tab, Pfeiltasten und Tastenkürzel werden hier ebenfalls erfasst.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Aktive Feststelltasten
–
Modifikatoren
ctrlKey shiftKey altKey metaKey
Tastenverlauf (neueste zuerst)
Tastenverlauf (neueste zuerst)
EreigniskeycodekeyCodelocationModifikatorenrepeat
Tastencode-Referenz (US-QWERTY)

Tastencode-Referenz (US-QWERTY)
keycodekeyCodelocationHinweis

Die key-Werte gelten für ein US-Layout ohne Modifikatoren; andere Layouts erzeugen für denselben code andere Zeichen. keyCode und which sind veraltet, werden aber noch häufig verwendet.

So finden Sie einen Tastencode

  1. Klicken Sie auf „Tastenerfassung starten“ oder in das große Feld. Ein farbiger Rahmen zeigt, dass es Tasten entgegennimmt.
  2. Drücken Sie eine beliebige Taste oder Tastenkombination. Die große Anzeige zeigt den key-Wert und den veralteten keyCode, die Karten darunter listen event.key, event.code, event.keyCode, event.which, event.location, event.repeat sowie die „Aktiven Feststelltasten“ (Caps Lock, Num Lock, AltGraph).
  3. Die Anzeigen unter „Modifikatoren“ leuchten für ctrlKey, shiftKey, altKey und metaKey auf.
  4. Kopieren Sie das „JavaScript-Snippet für diese Taste“. Unter „Abgleich über“ wählen Sie zwischen event.key, event.code und event.keyCode (veraltet).
  5. Im „Tastenverlauf (neueste zuerst)“ können Sie mehrere Tastendrücke vergleichen. Aktivieren Sie „Auch keyup-Ereignisse protokollieren“, um auch das Loslassen zu sehen.
  6. Durchsuchen oder filtern Sie die Tabelle „Tastencode-Referenz (US-QWERTY)“, wenn Sie einen Wert brauchen, ohne die Taste zu drücken.

Solange das Feld den Fokus hat, wird die Standardaktion jeder Taste blockiert. Tab, Pfeiltasten, Rücktaste oder Strg+S werden also erfasst, statt den Fokus zu verschieben oder einen Dialog zu öffnen. Klicken Sie irgendwo außerhalb des Felds, um die Tastatur wieder an die Seite zurückzugeben. Einige Kürzel verarbeitet das Betriebssystem, bevor der Browser sie sieht (Alt+Tab, Strg+Alt+Entf, Cmd+Tab, oft auch die Druck-Taste) – diese kann keine Webseite auslesen.

key, code oder keyCode: Was sollten Sie verwenden?

Ein KeyboardEvent enthält mehrere Werte, die unterschiedliche Fragen beantworten:

Eigenschaft Was sie angibt Beispiel (Taste Z auf deutscher QWERTZ-Tastatur)
key Das erzeugte Zeichen bzw. die benannte Taste, nach Layout und Modifikatoren "z", mit Umschalt "Z"
code Die physische Position der Taste, unabhängig vom Layout "KeyY"
keyCode / which Eine veraltete Zahl, meist der ASCII-Code des Großbuchstabens 90
location 0 Standard, 1 links, 2 rechts, 3 Ziffernblock 0

Verwenden Sie key, wenn die Bedeutung zählt: Enter zum Absenden, Escape zum Schließen, „?“ zum Öffnen einer Hilfe. Verwenden Sie code für Spiele und Kürzel, die von der Position der Tasten abhängen, etwa die WASD-Steuerung, die auf einer deutschen QWERTZ- oder französischen AZERTY-Tastatur an derselben Stelle bleiben soll. Vermeiden Sie keyCode und which in neuem Code: Sie sind veraltet, ihre Werte für Satzzeichen unterscheiden sich zwischen Browsern (Firefox sendet für das Semikolon 59, Chrome 186), und sie können linke und rechte Umschalttaste oder die beiden Enter-Tasten nicht unterscheiden. Für die Pflege älteren Codes sollte man sie trotzdem kennen – deshalb zeigt das Tool sie an.

Zum Snippet

Der erzeugte Listener prüft genau die gedrückte Taste, einschließlich Strg, Alt und Meta. Bei druckbaren Zeichen, die über key abgeglichen werden, fehlt die Umschalttaste, weil sie schon im Wert steckt: Umschalt+1 ergibt auf einem US-Layout "!". Drücken Sie einen Modifikator allein, wiederholt das Snippet dessen Flag nicht. Beachten Sie, dass metaKey auf dem Mac die Cmd-Taste und am PC die Windows-Taste ist; plattformübergreifende Kürzel prüfen daher meist event.ctrlKey || event.metaKey.

Häufige Fragen

Warum zeigt keyCode für verschiedene Zeichen dieselbe Zahl?

keyCode bezeichnet die Taste, nicht das Zeichen. Die Ziffer 1 und „!“ teilen sich die 49, „a“ und „A“ die 65. Lesen Sie key, um das tatsächliche Zeichen zu erhalten.

Warum wird meine Z-Taste als KeyY angezeigt?

code benennt Tasten nach ihrer Position auf einer US-QWERTY-Tastatur. Die Taste mit der Aufschrift Z liegt auf einer deutschen Tastatur dort, wo auf einer US-Tastatur das Y sitzt. Ihr code ist daher KeyY, ihr key aber „z“.

Was bedeutet „Dead“ in event.key?

Es handelt sich um eine Tottaste wie ^ oder ´ auf der deutschen Tastatur, die auf die nächste Taste wartet, um einen Buchstaben mit Akzent zu bilden. Das fertige Zeichen liefert das folgende Tastenereignis oder das input-Ereignis eines Textfelds.

Warum steht bei event.repeat „ja“?

Sie halten die Taste gedrückt, und das Betriebssystem sendet automatische Wiederholungen. Prüfen Sie event.repeat, um diese zu ignorieren, etwa damit ein Kürzel nur einmal auslöst.

Wird etwas von meinen Eingaben aufgezeichnet oder gesendet?

Nein. Die Tastenereignisse werden von dieser Seite in Ihrem Browser gelesen und nie irgendwohin gesendet. Der Verlauf verschwindet, wenn Sie die Seite neu laden oder verlassen.

Ähnliche Tools