🔰key event

🚧 under construction

browser ⟩ event ⟩ type ⟩ key

keydown / keyup – keyboard key is pressed / released.

🧨 雷區

Despite its name, "keydown" fires not only when the key is physically pushed down. When a key is pressed and held, the event fires again every time the key repeats. Be carefull about this❗

Using key events to figure out what is being typed is problematic.

• virtual keyboard on Android phones doesn’t fire key events.

• input method editor (IME) may use multiple key strokes to create characters.

Elements like <input> and <textarea>, fire "input" events whenever the user changes their content. To get the actual content that was typed, it is best to directly read it from the focused field. 👉 Eloquent JS ⟩ Form Fields

⭐️ 重點

The event.target of a key event is the element that has focus when the key is pressed.

• Most nodes cannot have focus unless you give them a tabindex attribute.

• When nothing in particular has focus, document.body acts as the target of key events.

The event.key property holds a string, for example：

• enter："Enter"

• shift + "v"： "V"

• shift + "1"： "!"

👥 相關

• input event

💈範例

• press shift + space

• replit ⟩ press "v"

// onkeydown
window.addEventListener("keydown", event => {
    if (event.key === "v") {
        document.body.style.background = "violet";
    }
});

// onkeyup
window.addEventListener("keyup", event => {
    if (event.key === "v") {
        document.body.style.background = "";
    }
});

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Key Events ⭐️

📘 手冊

• Event ⟩ UIEvent ⟩ KeyboardEvent ⟩

  • keydown | keyup

  • .key, .code, .altKey, .ctrlKey, .metaKey, .shiftKey, ...