HTML KeyboardEvent which प्रॉपर्टी: यूनिकोड कैरेक्टर कोड प्राप्त करें

HTML KeyboardEvent.which प्रॉपर्टी उस कुंजी का यूनिकोड कैरेक्टर कोड लौटाती है जिसने onkeypress, onkeydown, या onkeyup इवेंट ट्रिगर किया। नोट: यह प्रॉपर्टी निरस्त (deprecated) है; आधुनिक कोड में event.key (कैरेक्टर के लिए) या event.code (भौतिक कुंजी के लिए) का उपयोग करें।

सिंटैक्स (Syntax)

event.which

उदाहरण (Example)

यह उदाहरण टाइप किए गए वर्णों के यूनिकोड कोड दिखाता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    input {
      border: 2px solid #fff;
      padding: 12px;
      background: transparent;
      width: 310px;
      border-radius: 20px;
      outline: none;
      font-size: 1.2rem;
      text-align: center;
    }
    input:focus { border-color: #db133a; }
    ::placeholder { color: #666; }
    .show {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1rem;
      background: rgba(0,0,0,0.3);
      padding: 1rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 300px;
      max-height: 300px;
      overflow-y: auto;
      text-align: left;
    }
    .key-info {
      display: inline-block;
      background: rgba(255,255,255,0.1);
      padding: 0.5rem 1rem;
      margin: 0.25rem;
      border-radius: 8px;
      min-width: 80px;
    }
    .key-char { font-size: 1.5rem; font-weight: bold; }
    .key-code { font-size: 0.8rem; opacity: 0.8; }
    .deprecated-notice {
      background: rgba(251, 191, 36, 0.2);
      border: 1px solid #fbbf24;
      color: #fbbf24;
      padding: 1rem;
      border-radius: 8px;
      margin: 1rem auto;
      max-width: 500px;
      text-align: left;
    }
  </style>
</head>
<body>
  <h1>HTML KeyboardEvent which प्रॉपर्टी डेमो</h1>
  
  <div class="deprecated-notice">
    <strong>⚠ निरस्त (Deprecated):</strong> event.which विरासत कोड के लिए है। आधुनिक कोड में उपयोग करें:
    <ul>
      <li>event.key - दबाया गया कैरेक्टर (उदाहरण: "a", "Enter", "Shift")</li>
      <li>event.code - भौतिक कुंजी (उदाहरण: "KeyA", "Enter", "ShiftLeft")</li>
      <li>event.keyCode - निरस्त, which के समान</li>
    </ul>
  </div>
  
  <input type="text" id="inputField" placeholder="यहां टाइप करें..." onkeypress="showKeyInfo(event)">
  <div class="show" id="keyDisplay">
    <p>दबाई गई कुंजियों के यूनिकोड कोड:</p>
  </div>

  <script>
    const keyDisplay = document.getElementById('keyDisplay');
    let keyCount = 0;
    
    function showKeyInfo(event) {
      keyCount++;
      const char = event.key;
      const which = event.which;
      const keyCode = event.keyCode;
      const code = event.code;
      
      // प्रिंट करने योग्य वर्णों के लिए ही दिखाएं
      if (char.length === 1 && char.match(/[\x20-\x7E\u0080-\uFFFF]/)) {
        const keyInfo = document.createElement('span');
        keyInfo.className = 'key-info';
        keyInfo.innerHTML = `
          <div class="key-char">${char}</div>
          <div class="key-code">which: ${which}</div>
          <div class="key-code">keyCode: ${keyCode}</div>
          <div class="key-code">code: ${code}</div>
        `;
        keyDisplay.appendChild(keyInfo);
      }
      
      // लॉग सभी इवेंट्स (कंसोल में)
      console.log(`Key: "${char}" | which: ${which} | keyCode: ${keyCode} | code: ${code} | type: ${event.type}`);
    }
    
    // कीडाउन/कीअप भी दिखाएं
    document.getElementById('inputField').addEventListener('keydown', (e) => {
      if (!e.key.match(/[\x20-\x7E]/)) { // नॉन-प्रिंटेबल
        console.log(`Keydown: key="${e.key}" which=${e.which} code="${e.code}"`);
      }
    });
  </script>
</body>
</html>

आउटपुट (Output)

टेक्स्ट फील्ड में टाइप करने पर प्रत्येक वर्ण का यूनिकोड कोड दिखाया जाता है:

विभिन्न कुंजियों के लिए कंसोल आउटपुट:

विस्तृत विश्लेषण

which, keyCode, key, code में अंतर

इवेंट प्रकार और which मान

• keypress: प्रिंट करने योग्य वर्णों के लिए यूनिकोड कोड लौटाता है (उदाहरण: 'a' = 97)। नॉन-प्रिंटेबल कुंजियों के लिए असंगत।
• keydown/keyup: वर्चुअल की कोड लौटाता है (keyCode के समान)। सभी कुंजियों के लिए काम करता है।

आम की कोड्स (keydown/keyup के लिए)

Enter: 13
Escape: 27
Space: 32
Arrow Keys: 37-40 (Left, Up, Right, Down)
Backspace: 8
Tab: 9
Delete: 46
F1-F12: 112-123
Shift: 16
Ctrl: 17
Alt: 18
CapsLock: 20

आधुनिक प्रतिस्थापन पैटर्न

कैरेक्टर इनपुट के लिए (keypress प्रतिस्थापन)

// पुराना तरीका (निरस्त)
input.onkeypress = (e) => {
  if (e.which >= 32 && e.which <= 126) { // प्रिंट करने योग्य ASCII
    handleChar(String.fromCharCode(e.which));
  }
};

// आधुनिक तरीका
input.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertText' && e.data) {
    handleChar(e.data); // सीधे कैरेक्टर/स्ट्रिंग मिलता है
  }
});

विशिष्ट कुंजियों का पता लगाना (keydown)

// पुराना
if (e.keyCode === 13) { /* Enter */ }

// आधुनिक - पठनीय और लेआउट-स्वतंत्र
if (e.key === 'Enter') { /* Enter */ }
if (e.code === 'Enter') { /* भौतिक Enter कुंजी */ }

// संशोधक कुंजियाँ
if (e.ctrlKey && e.key === 's') { /* Ctrl+S */ }

ब्राउज़र समर्थन

event.which: सभी ब्राउज़र (विरासत)।
event.key/event.code: Chrome 51+, Firefox 23+, Safari 10.1+, Edge 79+।

सिफारिश

नए कोड में event.which का उपयोग न करें। इसके बजाय:

• कैरेक्टर इनपुट के लिए: beforeinput इवेंट या event.key (keypress में)
• कुंजी पहचान के लिए: event.key (कैरेक्टर) या event.code (भौतिक)
• संशोधक कुंजियों के लिए: event.ctrlKey, event.shiftKey, event.altKey, event.metaKey