Нажатие клавиш

Когда пользователь нажимает клавишу, элемент, в котором он печатает, получает событие keydown (клавиша нажата). Какая это была клавиша, хранится в event.key:

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

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

Наберите в поле Hi и нажмите Enter, и консоль покажет:

Shift
H
i
Enter

Клавиша с буквой даёт эту букву, заглавную — если зажат Shift. У других клавиш есть названия, которые начинаются с заглавной буквы: "Enter", "Escape", "Backspace", "ArrowUp", "Shift". Пробел даёт пробел, " ". Если вы не знаете, как называется клавиша, выведите event.key, как выше, и нажмите её.

Приложения часто используют Enter, чтобы подтвердить набранное, и Escape, чтобы отменить его:

nameInput.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        greeting.textContent = `Привет, ${nameInput.value}!`;
    } else if (event.key === "Escape") {
        nameInput.value = "";
    }
});

Обработчик запускается для каждой клавиши, поэтому он проверяет, какая это была. Для любой другой клавиши он ничего не делает, и буквы появляются в поле как обычно.

Поле здесь не в форме. В форме Enter в поле отправляет всю форму. Что это значит, вы увидите через два упражнения.