เหตุการณ์คีย์บอร์ด (Keyboard Events) ใน JavaScript

Keyboard Events เกิดขึ้นเมื่อผู้ใช้โต้ตอบกับคีย์บอร์ด มีหลัก 3 ประเภทหลัก ได้แก่ keydown, keypress (ล้าสมัย), และ keyup

ประเภทของ Keyboard Events

ลำดับการทำงาน

1. ผู้ใช้กดปุ่ม → keydown
2. ถ้าค้างไว้ → keydown ทำซ้ำ (Key Repeat)
3. ผู้ใช้ปล่อยปุ่ม → keyup

คุณสมบัติสำคัญของ KeyboardEvent

• key - ค่าของปุ่มที่กด (เช่น "Enter", "a", "ArrowUp") แนะนำให้ใช้
• code - รหัสปุ่มทางกายภาพ (เช่น "KeyA", "Enter") ไม่ขึ้นกับภาษา/เลย์เอาต์
• ctrlKey, shiftKey, altKey, metaKey - สถานะปุ่มปรับแต่ง (Modifier keys)
• repeat - true ถ้าเป็นการทำซ้ำจากการค้างปุ่ม

ตัวอย่าง: ตรวจจับเหตุการณ์คีย์บอร์ด

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyboard Events</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; }
        .info { background: #f5f5f5; padding: 15px; margin: 10px 0; border-radius: 4px; }
    </style>
</head>
<body>
    <h1>Keyboard Events ใน JavaScript</h1>
    <div class="info">คลิกที่หน้าจอแล้วกดปุ่มคีย์บอร์ดเพื่อทดสอบ</div>
    <div class="result"></div>

    <script>
        let resEle = document.querySelector(".result");
        
        document.body.addEventListener("keydown", (e) => {
            resEle.innerHTML = `
                keydown<br>
                key: ${e.key} <br>
                code: ${e.code} <br>
                repeat: ${e.repeat} <br>
                ctrl: ${e.ctrlKey}, shift: ${e.shiftKey}, alt: ${e.altKey}
            `;
        });
        
        document.body.addEventListener("keyup", (e) => {
            resEle.innerHTML += `<br><br>keyup: ${e.key}`;
        });
    </script>
</body>
</html>

แนวทางปฏิบัติที่ดี (Best Practices)

• ใช้ keydown สำหรับเกม/แอปที่ต้องการตอบสนองเร็ว (ค้างได้)
• ใช้ keyup สำหรับการยืนยันการกดครั้งเดียว (เช่น กด Enter เพื่อส่งฟอร์ม)
• หลีกเลี่ยง keypress เพราะถูก Deprecated และไม่รองรับปุ่มบางปุ่ม (Enter, Esc, Arrow keys)
• ใช้ e.key แทน e.keyCode หรือ e.which (ล้าสมัย)

ตัวอย่างปฏิบัติ: Shortcut Keys

document.addEventListener("keydown", (e) => {
    // Ctrl + S
    if (e.ctrlKey && e.key === "s") {
        e.preventDefault();
        saveDocument();
    }
    // Escape เพื่อปิด Modal
    if (e.key === "Escape") {
        closeModal();
    }
});