Tastencodes anzeigen

So funktioniert das Script

Das Script besteht aus zwei Funktionen und zwei Anmeldungen: Eine Funktion füllt die Tabelle, sobald eine Taste gedrückt wird, die andere leert sie wieder. Angemeldet werden sie einmal für das Tastatur-Ereignis des ganzen Dokuments und einmal für den Klick auf den Knopf. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen darin nicht mit anderen Scripts auf der Seite kollidieren.

const felder = {
  taste: document.getElementById("tc-taste"),
  code: document.getElementById("tc-code"),
  bezeichner: document.getElementById("tc-bezeichner"),
  zeichen: document.getElementById("tc-zeichen"),
  html: document.getElementById("tc-html")
};

Statt fünf einzelner Variablen sammelt das Script die fünf Ausgabezellen in einem Objekt. Ein Objekt ist eine Sammlung von Wertepaaren aus Name und Inhalt; auf einen Eintrag greift man dann mit felder.code zu. Das spart Tipparbeit und erlaubt es später, alle Zellen in einer Schleife zu durchlaufen. Die Suche mit getElementById() passiert dabei nur ein einziges Mal beim Laden und nicht bei jedem Tastendruck erneut.

document.addEventListener("keydown", tasteZeigen);

Hier meldet sich das Script beim gesamten Dokument für das Ereignis keydown an — also für „eine Taste wurde heruntergedrückt“. Weil die Anmeldung am document hängt und nicht an einem einzelnen Eingabefeld, wird jeder Tastendruck erfasst, egal wo auf der Seite ihr euch gerade befindet. Das verwandte Ereignis keyup würde erst beim Loslassen auslösen, keypress ist veraltet und sollte nicht mehr verwendet werden.

function tasteZeigen(ereignis) {
  const tastencode = ereignis.keyCode || ereignis.which;

Die Funktion bekommt vom Browser automatisch ein Ereignis-Objekt übergeben — hier ereignis genannt. Darin steckt alles Wissenswerte über den Tastendruck. Der Oder-Operator || nimmt keyCode, und nur falls der Browser den nicht kennt, ersatzweise which; genau diese Absicherung stand schon in der Originalversion des Scripts. Beide Angaben gelten heute als veraltet — für neue Scripts nimmt man ereignis.key oder ereignis.code. Hier bleiben sie drin, weil der Tastencode ja gerade das ist, was angezeigt werden soll.

felder.taste.textContent = ereignis.key === " " ? "Leertaste" : ereignis.key;
felder.bezeichner.textContent = ereignis.code || "—";

ereignis.key liefert das Zeichen, das die Taste erzeugt — bei gedrückter Umschalttaste also A statt a. Für die Leertaste wäre das ein einzelnes Leerzeichen und damit unsichtbar; der Fragezeichen-Doppelpunkt-Ausdruck (der sogenannte Bedingungsoperator) schreibt in diesem einen Fall stattdessen das Wort „Leertaste“ hin. Zu lesen ist er als: wenn key ein Leerzeichen ist, dann „Leertaste“, sonst key.

felder.zeichen.innerHTML = "&#" + tastencode + ";";
felder.html.textContent = "&#" + tastencode + ";";

Diese beiden Zeilen bauen exakt dieselbe Zeichenkette zusammen, etwa A — und trotzdem steht in den Tabellenzellen Verschiedenes. Der Grund ist der Unterschied zwischen den beiden Zuweisungen: innerHTML übergibt den Text dem HTML-Parser, der die Zeichenfolge als sogenannte Entität erkennt und daraus das Zeichen A macht. textContent setzt dagegen puren Text, und man sieht die Schreibweise selbst. So zeigt die eine Zelle das Ergebnis, die andere den Bauplan zum Abschreiben.

function zuruecksetzen() {
  anzeige.innerHTML = "<strong>Bitte eine Taste drücken</strong>";
  for (const name in felder) {
    felder[name].textContent = "—";
  }
}

Das Zurücksetzen nutzt aus, dass alle Ausgabezellen im Objekt felder stehen. Die for…in-Schleife läuft über alle Namen darin — taste, code, bezeichner, zeichen, html — und die eckigen Klammern in felder[name] holen zum jeweiligen Namen den Eintrag. Kommt später eine sechste Zeile dazu, muss hier nichts geändert werden.

Zum Anpassen: Die Gedankenstriche — sind der Platzhalter für „noch nichts gedrückt“ und lassen sich durch beliebigen Text ersetzen. Wer das Script nur für eine bestimmte Taste braucht, fragt in tasteZeigen() einfach ab, ob ereignis.code === "ArrowLeft" ist, und löst dann die gewünschte Aktion aus — das ist der übliche Weg für Tastatursteuerungen in Spielen.