JavaScript Keyboard Events: keydown & keyup

JavaScript Keyboard Events: keydown & keyup

JavaScript provides keyboard event listeners to detect when a key is pressed or released. The main events are:

1️⃣ keydown → Fires when a key is pressed down.
2️⃣ keyup → Fires when a key is released.

1️⃣ Basic Syntax

element.addEventListener("keydown", event => { ... });
element.addEventListener("keyup", event => { ... });

• event.key → Returns the name of the pressed key (e.g., "Enter", "a").
• event.code → Returns the physical key identifier (e.g., "KeyA", "ArrowUp").

2️⃣ keydown Example – Detect Key Press

document.addEventListener("keydown", (event) => {
    console.log(`Key pressed: ${event.key}`);
});

✅ Fires when a key is pressed and held down.

3️⃣ keyup Example – Detect Key Release

document.addEventListener("keyup", (event) => {
    console.log(`Key released: ${event.key}`);
});

✅ Fires after a key is released.

4️⃣ Detecting Specific Keys (e.g., Enter & Escape)

document.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        console.log("Enter key pressed!");
    } else if (event.key === "Escape") {
        console.log("Escape key pressed!");
    }
});

✅ Use case: Handling form submission on Enter or closing a modal with Escape.

5️⃣ Prevent Default Behavior

To stop the default action (e.g., prevent scrolling with arrow keys):

document.addEventListener("keydown", (event) => {
    if (event.key === "ArrowDown") {
        event.preventDefault(); // Prevents scrolling
        console.log("Arrow Down key pressed!");
    }
});

6️⃣ keypress (Deprecated)

🚨 The the keypress event was used before, but it's now deprecated. Use keydown instead.

7️⃣ Holding Down Keys

keydown fires continuously if a key is held down, while keyup fires once when released.

document.addEventListener("keydown", (event) => {
    console.log("Holding key:", event.key);
});

8️⃣ Detecting Key Combinations

You can detect multiple keys at once (e.g., Ctrl + S for saving).

document.addEventListener("keydown", (event) => {
    if (event.ctrlKey && event.key === "s") {
        event.preventDefault(); // Prevent browser save
        console.log("CTRL + S pressed!");
    }
});

✅ Useful for custom shortcuts in web apps.

9️⃣ Example: Move a Box with Arrow Keys

<div id="box" style="width:50px; height:50px; background:red; position:absolute; top:50px; left:50px;"></div>

<script>
    let box = document.getElementById("box");
    let position = { top: 50, left: 50 };

    document.addEventListener("keydown", (event) => {
        switch (event.key) {
            case "ArrowUp": position.top -= 10; break;
            case "ArrowDown": position.top += 10; break;
            case "ArrowLeft": position.left -= 10; break;
            case "ArrowRight": position.left += 10; break;
        }
        box.style.top = position.top + "px";
        box.style.left = position.left + "px";
    });
</script>

✅ Try moving the red box using arrow keys! 🏃‍♂️

🔹 Summary

Event	When it Fires	Continuous?
keydown	When a key is pressed	✅ Yes (if held)
keyup	When a key is released	❌ No
keypress	🚨 Deprecated	❌ No

✔ Use keydown for real-time input.
✔ Use keyup for actions after key release.
✔ Handle specific keys for shortcuts.

🔥 Need a custom keyboard interaction? Let me know!