Vô hiệu hóa phím mũi tên trong textarea bằng JavaScript

Mục đích

Ngăn chặn cuộn trang hoặc di chuyển con trỏ bằng phím mũi tên (Arrow keys) và Space trong textarea hoặc toàn trang.

Ví dụ: Disable Arrow Keys + Space

<!DOCTYPE html>
<html lang="vi">
<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', sans-serif; padding: 20px; }
        textarea { width: 100%; height: 150px; padding: 10px; font-family: monospace; font-size: 16px; }
        .result { font-size: 16px; font-weight: 500; color: #6a1b9a; margin-top: 15px; padding: 15px; background: #f3e5f5; border-radius: 4px; }
        button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }
        button:disabled { background: #90caf9; cursor: not-allowed; }
    </style>
</head>
<body>
    <h1>Vô hiệu hóa phím mũi tên trong textarea</h1>
    <textarea class="AreaText" placeholder="Thử dùng phím mũi tên, Space...>Hello world this is some sample text inside the text area element</textarea>
    <div class="result" id="result"></div>
    <button id="btn">VÔ HIỆU HÓA PHÍM MŨI TÊN & SPACE</button>
    <button id="btnEnable" disabled>KÍCH HOẠT LẠI</button>
    <h3>Nhấn nút trên để disable/enable phím mũi tên và Space</h3>

    <script>
        const btnDisable = document.getElementById('btn');
        const btnEnable = document.getElementById('btnEnable');
        const resEle = document.getElementById('result');
        const textarea = document.querySelector('.AreaText');

        let handler;

        btnDisable.addEventListener('click', () => {
            // Key codes: Space=32, Left=37, Up=38, Right=39, Down=40
            handler = (event) => {
                if ([32, 37, 38, 39, 40].includes(event.keyCode)) {
                    event.preventDefault();
                }
            };
            
            // Gắn trên window để chặn toàn trang
            window.addEventListener('keydown', handler, false);
            
            resEle.textContent = '⛔ Cuộn/di chuyển bằng phím mũi tên và Space đã bị VÔ HIỆU HÓA';
            btnDisable.disabled = true;
            btnEnable.disabled = false;
        });

        btnEnable.addEventListener('click', () => {
            window.removeEventListener('keydown', handler, false);
            resEle.textContent = '✅ Phím mũi tên và Space đã được KÍCH HOẠT LẠI';
            btnDisable.disabled = false;
            btnEnable.disabled = true;
        });
    </script>
</body>
</html>

Giải thích

• Dùng keydown event trên window để chặn toàn bộ trang
• event.preventDefault() ngăn hành vi mặc định (cuộn, di chuyển con trỏ)
• Mảng keyCode: 32 (Space), 37-40 (Arrow Left/Up/Right/Down)
• Luôn lưu reference handler để có thể removeEventListener sau

Cách hiện đại (Khuyên dùng)

Thay vì keyCode (deprecated), dùng event.key:

const blockedKeys = [' ', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];

handler = (event) => {
    if (blockedKeys.includes(event.key)) {
        event.preventDefault();
    }
};

Lưu ý UX

⚠️ Vô hiệu hóa phím mũi tên làm giảm trải nghiệm người dùng (không thể di chuyển con trỏ trong textarea). Chỉ dùng khi có lý do đặc biệt (game, presentation mode, v.v.).