ปิดการใช้งานปุ่มลูกศร (Arrow Keys) ใน Textarea ด้วย JavaScript

สามารถป้องกันไม่ให้ปุ่มลูกศร (Arrow Keys) ทำงานใน Textarea ได้โดยใช้ Event keydown และ preventDefault() เมื่อตรวจพบ Key Code ของปุ่มลูกศร

Key Codes ของปุ่มลูกศรและปุ่มอื่นๆ ที่เกี่ยวข้อง

ตัวอย่าง: ปิดการใช้งาน Arrow Keys และ Space ใน Textarea

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Arrow Keys</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-weight: 500; font-size: 18px; color: blueviolet; }
        textarea { width: 100%; height: 100px; padding: 10px; font-family: monospace; }
        button { padding: 8px 16px; margin: 15px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ปิดการใช้งานปุ่มลูกศรใน Textarea</h1>
    <textarea class="AreaText">Hello world this is some sample text inside the text area element</textarea>
    <div class="result"></div>
    <button class="Btn">ปิดการใช้งาน Arrow Keys</button>
    <h3>กดปุ่มด้านบน แล้วลองใช้ปุ่มลูกศรใน Textarea</h3>

    <script>
        let BtnEle = document.querySelector(".Btn");
        let resEle = document.querySelector(".result");
        let textarea = document.querySelector(".AreaText");
        
        let isDisabled = false;
        
        BtnEle.addEventListener("click", () => {
            isDisabled = !isDisabled;
            
            if (isDisabled) {
                // เพิ่ม Event Listener แบบ Capture เพื่อจับก่อน Textarea
                window.addEventListener("keydown", handleKeyDown, true);
                resEle.innerHTML = "🚫 ปิดการใช้งาน Arrow Keys และ Space แล้ว";
                BtnEle.textContent = "เปิดการใช้งาน Arrow Keys";
            } else {
                window.removeEventListener("keydown", handleKeyDown, true);
                resEle.innerHTML = "✅ เปิดการใช้งาน Arrow Keys แล้ว";
                BtnEle.textContent = "ปิดการใช้งาน Arrow Keys";
            }
        });
        
        function handleKeyDown(event) {
            // ตรวจสอบด้วย e.key (แนะนำ) หรือ e.keyCode (Legacy)
            const blockedKeys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
            const blockedCodes = [37, 38, 39, 40, 32];
            
            if (blockedKeys.includes(event.key) || blockedCodes.includes(event.keyCode)) {
                // ป้องกันเฉพาะใน Textarea เท่านั้น
                if (event.target === textarea || event.target.closest("textarea")) {
                    event.preventDefault();
                    resEle.innerHTML += "<br>🚫 บล็อก: " + event.key;
                }
            }
        }
    </script>
</body>
</html>

ผลลัพธ์

ก่อนกดปุ่ม: เลื่อนเคอร์เซอร์ใน Textarea ด้วย Arrow Keys ได้ปกติ
หลังกดปุ่ม "ปิดการใช้งาน": Arrow Keys และ Space ไม่ทำงานใน Textarea (แต่ยังทำงานนอก Textarea ได้)

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

// ใช้ e.key แทน e.keyCode (Deprecated)
const navigationKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"];

textarea.addEventListener("keydown", (e) => {
    if (navigationKeys.includes(e.key)) {
        e.preventDefault();
    }
});

// หรือใช้ CSS (สำหรับป้องกัน Scroll เท่านั้น)
/* textarea { overflow: hidden; } */

ข้อควรพิจารณา

• User Experience: การปิด Arrow Keys อาจทำให้ผู้ใช้รู้สึกหงุดหงิด (ไม่สามารถแก้ไขข้อความได้สะดวก)
• Accessibility: ผู้ใช้บางกลุ่มอาศัย Keyboard Navigation เป็นหลัก
• Alternative: พิจารณาใช้ readonly หรือ disabled แทน หากต้องการป้องกันการแก้ไขทั้งหมด