JavaScript - दबाए गए तीर कुंजी का पता लगाना

JavaScript में दबाए गए तीर कुंजी (arrow key) का पता लगाने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>तीर कुंजी डिटेक्शन</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } 
    .sample { font-size: 18px; font-weight: 500; } 
  </style> 
</head> 
<body> 
  <h1>दबाए गए तीर कुंजी का पता लगाना</h1> 
  <div class="sample"></div> 
  <h3>किसी भी तीर कुंजी को दबाएं ताकि पता चले कौन सी तीर कुंजी दबाई गई</h3> 
  <script> 
    let fillEle = document.querySelector(".sample"); 
    document.body.addEventListener("keydown", (event) => { 
      switch (event.keyCode) { 
        case 37: 
          fillEle.innerHTML = "बायां तीर दबाया गया"; 
          break; 
        case 38: 
          fillEle.innerHTML = "ऊपर तीर दबाया गया"; 
          break; 
        case 39: 
          fillEle.innerHTML = "दायां तीर दबाया गया"; 
          break; 
        case 40: 
          fillEle.innerHTML = "नीचे तीर दबाया गया"; 
          break; 
      } 
    }); 
  </script> 
</body> 
</html>

आउटपुट

किसी भी तीर कुंजी को दबाने पर:

की कोड्स रेफरेंस:

आधुनिक दृष्टिकोण (अनुशंसित):

document.addEventListener('keydown', (event) => {
  switch (event.key) {  // event.keyCode की जगह event.key उपयोग करें
    case 'ArrowLeft':
      console.log('बायां तीर');
      break;
    case 'ArrowUp':
      console.log('ऊपर तीर');
      break;
    case 'ArrowRight':
      console.log('दायां तीर');
      break;
    case 'ArrowDown':
      console.log('नीचे तीर');
      break;
  }
  
  // event.code फिजिकल की पोजिशन देता है (लेआउट इंडिपेंडेंट)
  console.log('कोड:', event.code);
});

मुख्य अंतर:

• event.keyCode - डिप्रिकेटेड, संख्यात्मक कोड
• event.key - दबाए गए कैरेक्टर/की का मान (उदाहरण: "ArrowLeft", "a", "Enter")
• event.code - कीबोर्ड पर फिजिकल की की पोजिशन (उदाहरण: "KeyA", "ArrowLeft")

उपयोग के मामले:

• गेम कंट्रोल्स (कैरेक्टर मूवमेंट)
• कैरोसेल/स्लाइडर नेविगेशन
• फॉर्म नेविगेशन (Enter से अगला फील्ड)
• शॉर्टकट कीज (Ctrl+Arrow, आदि)

बेस्ट प्रैक्टिस:

• event.key का उपयोग करें event.keyCode के बजाय
• event.preventDefault() का उपयोग करें डिफ़ॉल्ट स्क्रॉल व्यवहार रोकने के लिए
• गेम्स के लिए keydown और keyup दोनों ट्रैक करें