Chrome के पिछले कुछ वर्शन में, KeyboardEvents में दो और एलिमेंट जोड़े गए हैं. इनका इस्तेमाल, keydown, keypress, और keyup इवेंट के लिसनर को पास किए गए पैरामीटर के तौर पर किया जाता है. code एट्रिब्यूट (Chrome 48 में जोड़ा गया) और key एट्रिब्यूट (Chrome 51 में जोड़ा गया), दोनों से डेवलपर को आसानी से जानकारी मिलती है. हालांकि, लेगसी एट्रिब्यूट का इस्तेमाल करके, यह जानकारी मुश्किल से मिलती है.
कोड एट्रिब्यूट
सबसे पहले code एट्रिब्यूट की जानकारी दी गई है. यह स्ट्रिंग पर सेट होती है, जो KeyboardEvent जनरेट करने के लिए दबाए गए बटन को दिखाती है. इसमें मौजूदा कीबोर्ड लेआउट (उदाहरण के लिए, QWERTY बनाम Dvorak), स्थानीय भाषा (उदाहरण के लिए, अंग्रेज़ी बनाम फ़्रेंच) या किसी भी तरह की कार्रवाई बदलने वाली बटन को बिना ध्यान में रखा जाता है.
यह तब काम आता है, जब आपको यह जानना हो कि कौनसी फ़िज़िकल बटन दबाया गया था, न कि वह किस वर्ण से जुड़ा है. उदाहरण के लिए, अगर कोई गेम लिखा जा रहा है, तो हो सकता है कि आपको प्लेयर को अलग-अलग दिशाओं में ले जाने के लिए, बटन का कोई खास सेट चाहिए. साथ ही, यह मैपिंग कीबोर्ड लेआउट से अलग होनी चाहिए.
मुख्य एट्रिब्यूट
इसके बाद, हमारे पास नया key एट्रिब्यूट है. इसे भी स्ट्रिंग पर सेट किया जाता है. हालांकि, code उस फ़िज़िकल बटन की जानकारी दिखाता है जिसे दबाया गया था, जबकि key में उस बटन से जनरेट होने वाला वर्ण होता है. इसमें कीबोर्ड का मौजूदा लेआउट, स्थानीय भाषा, और कार्रवाई बदलने वाली बटन की जानकारी भी शामिल होती है.
key एट्रिब्यूट की वैल्यू देखने पर, यह पता चलता है कि स्क्रीन पर कौनसा वर्ण दिखेगा, जैसे कि उपयोगकर्ता ने टेक्स्ट इनपुट में टाइप किया हो.
इसका क्या मतलब है?
उदाहरण के लिए, मान लें कि आपका उपयोगकर्ता QWERTY कीबोर्ड लेआउट वाले अमेरिकन कीबोर्ड का इस्तेमाल कर रहा है. उस कीबोर्ड पर Q बटन को दबाने पर, KeyboardEvent दिखेगा. साथ ही, code एट्रिब्यूट "KeyQ" पर सेट होगा. यह बात कीबोर्ड के लेआउट और कार्रवाई बदलने वाली किसी भी दूसरी बटन के बावजूद लागू होती है. तुलना के लिए, फ़्रेंच (AZERTY) कीबोर्ड पर, इस बटन पर अब भी "KeyQ" का code होगा, भले ही कीकैप पर "a" लिखा हो.
अमेरिका के उसी कीबोर्ड पर Q बटन को दबाने पर, आम तौर पर KeyboardEvent जनरेट होगा. इसमें key को "q" (बिना किसी मॉडिफ़ायर बटन के), "Q" (Shift या CapsLock के साथ) या "œ" (OS X पर, Alt के साथ) पर सेट किया जाएगा. फ़्रेंच AZERTY कीबोर्ड पर, यह बटन "a" (या Shift या CapsLock के साथ "A") जनरेट करेगा. अन्य कीबोर्ड लेआउट के लिए, key वैल्यू "й", "ض", "ㅂ", "た" या कोई अन्य वर्ण हो सकती है.
ऊपर दिए गए गेम के उदाहरण पर फिर से विचार करें. अगर आपको अपने गेम में WASD बटन का इस्तेमाल करके, आगे-पीछे जाना है, तो code एट्रिब्यूट का इस्तेमाल करें और "KeyW", "KeyA", "KeyS", और "KeyD" की जांच करें. यह सुविधा सभी कीबोर्ड और लेआउट के लिए काम करेगी. यहां तक कि AZERTY कीबोर्ड के लिए भी, जो "w" और "z" बटन की जगह बदल देते हैं.
वर्चुअल कीबोर्ड
आपको पता चलेगा कि अब तक, हम फ़िज़िकल कीबोर्ड के हिसाब से व्यवहार पर फ़ोकस कर रहे थे. वर्चुअल कीबोर्ड या किसी अन्य इनपुट डिवाइस का इस्तेमाल करके टाइप करने वाले उपयोगकर्ताओं के लिए क्या होगा? स्पेसिफ़िकेशन में, code एट्रिब्यूट के लिए आधिकारिक दिशा-निर्देश दिए गए हैं. खास जानकारी के लिए, मान लें कि किसी स्टैंडर्ड कीबोर्ड के लेआउट की नकल करने वाले वर्चुअल कीबोर्ड के लिए, code एट्रिब्यूट सही तरीके से सेट हो सकता है. हालांकि, ऐसे वर्चुअल कीबोर्ड के लिए code एट्रिब्यूट सेट न हो सकता है जो ग़ैर-पारंपरिक लेआउट का इस्तेमाल करते हैं.
key एट्रिब्यूट के लिए, चीज़ें ज़्यादा आसान हैं. आपको उम्मीद करनी चाहिए कि यह एट्रिब्यूट, उपयोगकर्ता के टाइप किए गए वर्ण के आधार पर स्ट्रिंग में सेट हो.
इसे आज़माएं
KeyboardEvent से जुड़े सभी एट्रिब्यूट को विज़ुअलाइज़ करने के लिए, गैरी काचमार्चिक ने एक शानदार डेमो बनाया है:
अलग-अलग ब्राउज़र पर काम करना
फ़िलहाल, code एट्रिब्यूट का इस्तेमाल, Chrome 48 और उसके बाद के वर्शन, Opera 35 और उसके बाद के वर्शन, और Firefox 44 और उसके बाद के वर्शन में ही किया जा सकता है.
key एट्रिब्यूट का इस्तेमाल, Firefox 44 और उसके बाद के वर्शन, Chrome 51 और उसके बाद के वर्शन, और Opera 38 और उसके बाद के वर्शन में किया जा सकता है. साथ ही, Internet Explorer 9 और उसके बाद के वर्शन और Edge 13 और उसके बाद के वर्शन में, कुछ हद तक इसका इस्तेमाल किया जा सकता है.