KeyboardEvents में नया क्या है? कोड और कुंजियां!

Chrome के पिछले कुछ वर्शन में KeyboardEvent में दो नए वर्शन जोड़े गए हैं. इन्हें keydown, keypress, और keyup इवेंट लिसनर को पास किए गए पैरामीटर के तौर पर इस्तेमाल किया जाता है. code एट्रिब्यूट (Chrome 48 में जोड़ा गया) और key एट्रिब्यूट (Chrome 51 में जोड़ा गया), दोनों ही डेवलपर के लिए जानकारी पाने का आसान तरीका उपलब्ध कराते हैं. ऐसा न करने पर, लेगसी एट्रिब्यूट का इस्तेमाल करना मुश्किल होता है.

कोड एट्रिब्यूट

सबसे पहले, code एट्रिब्यूट के बारे में जानकारी मिलती है. यह उस स्ट्रिंग पर सेट है जिसे कीबोर्ड का मौजूदा लेआउट (उदाहरण के लिए, QWERTY बनाम Dvorak), स्थान-भाषा (जैसे कि अंग्रेज़ी बनाम फ़्रेंच) या खाते में कार्रवाई करने वाली किसी भी कुंजी का इस्तेमाल किए बिना, KeyboardEvent जनरेट करने के लिए दबाया गया था. बिना यह बटन दिखाया जाता है. यह तब फ़ायदेमंद होता है, जब आपको इस बात की परवाह हो कि कौनसी फ़िज़िकल कुंजी दबाई गई है, न कि किस वर्ण से जुड़ी. उदाहरण के लिए, अगर आपको गेम लिखना है, तो हो सकता है कि आप प्लेयर को अलग-अलग दिशाओं में ले जाने के लिए कुंजियों का कुछ सेट चाहें. ऐसे में मैपिंग को कीबोर्ड लेआउट से अलग होना चाहिए.

कुंजी एट्रिब्यूट

अब, हमारे पास key का नया एट्रिब्यूट है. इसे एक स्ट्रिंग पर भी सेट किया जाता है. हालांकि, code दबाए गए बटन के बारे में जानकारी दिखाता है. वहीं, key में कीबोर्ड के मौजूदा लेआउट, स्थान-भाषा, और कार्रवाई बदलने वाली कुंजियों को ध्यान में रखते हुए उस कुंजी से जनरेट किया गया वर्ण शामिल होता है. key एट्रिब्यूट की वैल्यू देखने से, यह जानने में मदद मिलती है कि स्क्रीन पर कौनसा वर्ण दिखेगा. ऐसा तब होता है, जब उपयोगकर्ता ने कोई टेक्स्ट इनपुट टाइप किया हो.

इसका क्या मतलब है?

एक सटीक उदाहरण देने के लिए, मान लें कि आपका उपयोगकर्ता QWERTY कीबोर्ड लेआउट वाले यू.एस. कीबोर्ड का इस्तेमाल कर रहा है. उस कीबोर्ड पर फ़िज़िकल Q बटन दबाने से, KeyboardEvent जनरेट होगा, जिसमें code एट्रिब्यूट को "KeyQ" पर सेट किया जाएगा. यह सच है, भले ही कीबोर्ड लेआउट कुछ भी हो या किसी भी दूसरे कार्रवाई बदलने वाली कुंजी पर ध्यान दिए बिना. तुलना के लिए, फ़्रेंच (AZERTY) कीबोर्ड पर इस बटन का code "KeyQ" होगा. हालांकि, कीकैप पर प्रिंट किया गया अक्षर "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 एट्रिब्यूट के लिए चीज़ें ज़्यादा आसान हैं. उपयोगकर्ता ने (वर्चुअल तरीके से) टाइप किए गए वर्ण के आधार पर, इसे स्ट्रिंग पर सेट किया जाना चाहिए.

इसे आज़माएं

गैरी Kachmarčík ने KeyboardEvent से जुड़े सभी एट्रिब्यूट को विज़ुअलाइज़ करने के लिए, एक शानदार डेमो तैयार किया है:

KeyboardEvent की विशेषताएं

क्रॉस-ब्राउज़र सहायता

फ़िलहाल, code एट्रिब्यूट की वैल्यू Chrome 48, Opera 35, और Firefox 44+ के साथ ही इस्तेमाल की जा सकती है. key एट्रिब्यूट, Firefox 44+, Chrome 51+, और Opera 38+ पर काम करता है. साथ ही, यह Internet Explorer 9+ और Edge 13+ में कुछ हद तक काम करता है.