Tasten drücken

Wenn der Nutzer eine Taste drückt, bekommt das Element, in das er tippt, das Ereignis keydown (eine Taste ging nach unten). Welche Taste es war, steht in event.key:

const nameInput = document.querySelector("#name");

nameInput.addEventListener("keydown", function (event) {
    console.log(event.key);
});

Tippe Hi in das Feld und drücke Enter, und die Konsole zeigt:

Shift
H
i
Enter

Eine Buchstabentaste gibt ihren Buchstaben, einen großen, wenn Shift gedrückt ist. Andere Tasten haben Namen, die mit einem Großbuchstaben beginnen: "Enter", "Escape", "Backspace", "ArrowUp", "Shift". Die Leertaste gibt ein Leerzeichen, " ". Wenn du nicht weißt, wie eine Taste heißt, gib wie oben event.key aus und drücke die Taste.

Apps verwenden oft Enter, um das Getippte zu bestätigen, und Escape, um es abzubrechen:

nameInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        begruessung.textContent = `Hallo, ${nameInput.value}!`;
    } else if (event.key === "Escape") {
        nameInput.value = "";
    }
});

Der Handler läuft für jede Taste, also prüft er, welche es war. Bei jeder anderen Taste tut er nichts, und die Buchstaben erscheinen wie gewohnt im Feld.

Das Feld hier steht nicht in einem Formular. In einem Formular schickt Enter in einem Feld das ganze Formular ab. Was das bedeutet, siehst du in zwei Übungen.