JavaScript - ตรวจจับปุ่มลูกศรที่กด (Detect Arrow Keys)

การตรวจจับปุ่มลูกศรใน JavaScript

ใช้ Event keydown หรือ keyup บน document หรือ window แล้วตรวจสอบ event.key (แนะนำ) หรือ event.keyCode (Legacy)

ตัวอย่างโค้ดครบถ้วน (สมัยใหม่)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Detect Arrow Keys</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; text-align: center; }
    .key-display { font-size: 48px; font-weight: bold; color: #7e32d4; margin: 30px 0; min-height: 60px; }
    .key-name { font-size: 24px; color: #333; margin-bottom: 20px; }
    .instructions { background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0; }
    .key-code { font-family: monospace; background: #2d2d2d; color: #f8f8f2; padding: 2px 6px; border-radius: 3px; }
    .arrow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 20px auto; }
    .arrow-key { padding: 20px; background: #eee; border-radius: 8px; font-weight: bold; transition: all 0.1s; }
    .arrow-key.active { background: #7e32d4; color: white; transform: scale(1.05); }
    .arrow-key kbd { font-size: 24px; }
  </style>
</head>
<body>
  <h1>ตรวจจับปุ่มลูกศร (Arrow Keys)</h1>
  <div class="instructions">
    กดปุ่มลูกศรบนคีย์บอร์ด (↑ ↓ ← →) เพื่อทดสอบ
  </div>
  
  <div class="key-name">ปุ่มที่กด: -</div>
  <div class="key-display" id="keyDisplay">-</div>
  <div class="key-name">Key: - | Code: -</div>
  
  <div class="arrow-grid">
    
↑
ArrowUp
    
←
ArrowLeft
    
→
ArrowRight
    
↓
ArrowDown
    

      กดปุ่มลูกศรเพื่อไฮไลท์
    
  </div>

  <script>
    const keyDisplay = document.getElementById('keyDisplay');
    const keyName = document.getElementById('keyName');
    const keyValue = document.getElementById('keyValue');
    const codeValue = document.getElementById('codeValue');
    
    const arrowKeys = {
      'ArrowUp': { symbol: '↑', name: 'ขึ้น', element: 'keyUp' },
      'ArrowDown': { symbol: '↓', name: 'ลง', element: 'keyDown' },
      'ArrowLeft': { symbol: '←', name: 'ซ้าย', element: 'keyLeft' },
      'ArrowRight': { symbol: '→', name: 'ขวา', element: 'keyRight' }
    };
    
    let activeKey = null;
    
    document.addEventListener('keydown', (e) => {
      // ป้องกัน scroll หน้าจอเมื่อกดลูกศร
      if (arrowKeys[e.key]) {
        e.preventDefault();
      }
      
      keyValue.textContent = e.key;
      codeValue.textContent = e.code;
      
      if (arrowKeys[e.key]) {
        const info = arrowKeys[e.key];
        keyDisplay.textContent = info.symbol;
        keyName.textContent = info.name;
        
        // Highlight visual key
        if (activeKey) activeKey.classList.remove('active');
        const el = document.getElementById(info.element);
        if (el) { el.classList.add('active'); activeKey = el; }
      } else {
        keyDisplay.textContent = e.key.length === 1 ? e.key : e.key;
        keyName.textContent = 'อื่นๆ';
      }
    });
    
    document.addEventListener('keyup', (e) => {
      if (arrowKeys[e.key] && activeKey) {
        activeKey.classList.remove('active');
        activeKey = null;
      }
    });
    
    // Focus ตัวหน้าเพื่อรับ key events
    window.focus();
  </script>
</body>
</html>

Key Properties เปรียบเทียบ

ค่าของปุ่มลูกศร (Arrow Keys)

การประยุกต์ใช้จริง

1. Game Controls / Canvas Movement

const player = { x: 100, y: 100, speed: 5 };
const keysPressed = {};

document.addEventListener('keydown', (e) => { keysPressed[e.code] = true; });
document.addEventListener('keyup', (e) => { keysPressed[e.code] = false; });

function gameLoop() {
  if (keysPressed['ArrowUp']) player.y -= player.speed;
  if (keysPressed['ArrowDown']) player.y += player.speed;
  if (keysPressed['ArrowLeft']) player.x -= player.speed;
  if (keysPressed['ArrowRight']) player.x += player.speed;
  render();
  requestAnimationFrame(gameLoop);
}

2. Carousel / Slider Navigation

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') showPrevSlide();
  if (e.key === 'ArrowRight') showNextSlide();
});

3. Form Navigation (Enter/Arrow keys)

document.addEventListener('keydown', (e) => {
  const focusable = 'input, select, textarea, button, a[href]';
  const elements = Array.from(document.querySelectorAll(focusable));
  const currentIndex = elements.indexOf(document.activeElement);
  
  if (e.key === 'ArrowDown' || (e.key === 'Enter' && !e.shiftKey)) {
    e.preventDefault();
    elements[(currentIndex + 1) % elements.length].focus();
  }
  if (e.key === 'ArrowUp' || (e.key === 'Enter' && e.shiftKey)) {
    e.preventDefault();
    elements[(currentIndex - 1 + elements.length) % elements.length].focus();
  }
});

4. Accessibility: Arrow Keys ใน Component (Menu, Tabs, Listbox)

// WAI-ARIA Authoring Practices
// Menu: ArrowUp/Down = navigate, Enter/Space = activate, Escape = close
// Tabs: ArrowLeft/Right = switch tab, Home/End = first/last
// Listbox: ArrowUp/Down = navigate, Enter = select

Best Practices

• ใช้ event.key หรือ event.code แทน keyCode
• เรียก e.preventDefault() เมื่อจัดการ Arrow keys เพื่อป้องกัน scroll หน้าจอ
• เพิ่ม tabindex="0" ให้ element ที่ต้องการรับ key events
• จัดการ Focus management อย่างถูกต้อง
• รองรับ Touch/Swipe events สำหรับมือถือพร้อมกัน