Stisk klávesy

Když uživatel stiskne klávesu, prvek, do kterého píše, dostane událost keydown (klávesa dolů). Která klávesa to byla, je v event.key:

const vstupJmeno = document.querySelector("#jmeno");

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

Napište do textového pole Ahoj a stiskněte Enter. Konzole ukáže:

Shift
A
h
o
j
Enter

Klávesa s písmenem dá své písmeno, se Shiftem velké. Ostatní klávesy mají názvy, které začínají velkým písmenem: "Enter", "Escape", "Backspace", "ArrowUp" (šipka nahoru), "Shift". Mezerník dá mezeru, " ". Když nevíte, jak se klávesa jmenuje, vypište si event.key jako výše a klávesu stiskněte.

Aplikace často používají Enter k potvrzení toho, co uživatel napsal, a Escape ke zrušení:

vstupJmeno.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
        pozdrav.textContent = `Ahoj, ${vstupJmeno.value}!`;
    } else if (event.key === "Escape") {
        vstupJmeno.value = "";
    }
});

Obsluha se spustí pro každou klávesu, a proto kontroluje, která to byla. Pro ostatní klávesy nedělá nic a písmena se v textovém poli objeví jako obvykle.

Textové pole tady není ve formuláři. Ve formuláři Enter v textovém poli odešle celý formulář. Co to znamená, uvidíte za dvě cvičení.