Aufgabe aus Kapitel ../../events-keyboard.html

Beim Drücken einer Taste im weißen Eingabefeld zeigt das Skript event.key, event.keyCode und event.code an. Das Skript liegt bereits vor, aber es zeigt keine der zusätzlich gedrückten Tasten – also ob SHIFT, ALT und CTRL zusätzlich gehalten werden.

Erweitern Sie das Skript um die Anzeige weiterer Tasten!

<div class="stripe">
   <input id="input" type="text" autofocus>
   <div id="result"></div>
</div>

Diese Übung wiederholt Stoff aus dem vorangegangenen Kapiteln, denn das Skript arbeitet mit einem JavaScript-Objekt, um die Eigenschaften des event-Objekts unter einem Dach zu sammeln.

Der fertige Teil des Skripts erzeugt auch die DOM-Elemente für die Anzeige der Ergebnisse und vertieft die Kapitel zum Dokument Object Model.

Erklärungen zur Skript

Den Anfang macht die letzte Zeile des Skripts: Der Event Listener wartet auf das Herunterdrücken einer Taste und ruft dann die Funktion showCodes auf. Der Funktionsaufruf hat ohne runde Klammern zu erfolgen, denn sonst würde die Funktion sofort ausgeführt. Ohne die runden Klammern hingegen kommt es erst beim Eintreten eines keydown-Events zum Funktionsaufruf.

document.querySelector("input#input").
         addEventListener("keydown", showCodes);

Die Anweisungen liegen nicht innerhalb einer anonymen Funktion wie in vielen der Code-Beispiele, sondern sind in die Funktion showCodes(evt) ausgelagert. Die Funktion muss mit dem Event-Objekt als Argument aufgerufen werden.

function showCodes(evt) {
   const input = document.querySelector("#input");
   const result = document.querySelector("#result");
…
}

Noch vor dem Anlegen der Werte eines keyDown-Events wird die letzte Ausgabe gelöscht. input.value löscht den alten Wert, damit immer nur ein Zeichen im input-Element sichtbar ist.

result.innerHTML = "";
input.value = "";

Das JavaScript-Objekt keyCodes sammelt die drei Eigenschaften des keydown-Events. Weil die Leertaste ein Leerzeichen erzeugt, geben wir ihr einen Namen als Erkennungsmerkmal.

const keyCodes = {
   key:      evt.key === " " ? "Blank" : evt.key,  
   keyCode:  evt.keyCode, 
   code:     evt.code
};

Kein forEach(), kein for-of: keyCodes ist ein JavaScript-Objekt, also benutzt das Skript die for-Schleife für Objekte: for-in. Am Anfang der Übung liegen drei Elemente im Objekt: key, keyCode und code. Die for-in-Schleife erzeugt für jedes dieser drei Elemente ein div-Element und gibt ihm den Namen der Eigenschaft als CSS-Klasse.

Für die blau hinterlegte Überschrift der Boxen erzeugt das Skript ein span-Element.

Die Methode append() hängt ein oder mehrere Elemente an ein vorhandenes Fragment, am Ende hängt append() das div-Element mit seiner Überschrift an das div-Element mit der Klasse result aus dem HTML-Markup.

for (let taste in keyCodes) {
   const div = document.createElement("div");
   div.className =  taste;
	
   const span = document.createElement("span");
	
   const msg = document.createTextNode(taste);
   const text = document.createTextNode(keyCodes [taste]);
	
   span.append(taste);
   div.append(span, text);
   result.append(div)
}

Tipp: Lassen Sie sich das keyCodes-Objekt nach der for-in-Schleife in der Konsole anzeigen!

Die Anzeige weiterer Eigenschaften

Weil das Skript die Werte der Eigenschaften das das Objekt keyCodes übernimmt und dann alle Eigenschaften in der for-in-Iteration über alle Elemente des Objekts aufbereitet, ist die Lösung schnell und besteht nur aus drei Zeilen. Das Objekt keyCodes wird erweitert.

const keyCodes = {
   key:      evt.key === " " ? "Blank" : evt.key,  
   keyCode: evt.keyCode, 
   code:     evt.code,
   shiftKey: evt.shiftKey, 
   ctrlKey: evt.ctrlKey
};

Sicher kann man diese Aufgabe auch einfacher lösen als auf diesem Weg, aber sobald es an Erweiterungen geht, ist klar, welche Vorteile dieser formelle Ansatz mit dem Objekt mit sich bringt.