कीबोर्ड की-कोड फाइंडर — keyCode, code, key Properties
डिटेक्शन ज़ोन पर क्लिक करें और कोई भी की दबाएं तो JavaScript इवेंट प्रॉपर्टीज़ तुरंत दिखेंगी: key, code, keyCode, which, charCode और मॉडिफायर स्थिति (Ctrl, Alt, Shift, Meta)। सभी 17 वैल्यू रियल टाइम में अपडेट होती हैं। कीबोर्ड इवेंट हैंडलर्स को डीबग करने के लिए परफेक्ट।
यहाँ क्लिक करें, फिर कोई भी की दबाएं
कैसे काम करता है
JavaScript कीबोर्ड इवेंट्स: key, code और keyCode
जब यूज़र कोई की दबाता है, तो ब्राउज़र तीन इवेंट्स क्रम में फायर करता है: keydown, keypress और keyup। प्रत्येक इवेंट ऑब्जेक्ट में कई प्रॉपर्टीज़ होती हैं जो दबाई गई की को पहचानती हैं। सबसे महत्वपूर्ण हैं: key (कैरेक्टर या नामित की जैसे 'Enter'), code (फिज़िकल की लोकेशन जैसे 'KeyA' या 'ArrowLeft'), और keyCode (एक लेगेसी इंटीजर, जैसे Shift स्थिति की परवाह किए बिना 'A' के लिए 65)।
keyCode और which प्रॉपर्टीज़ W3C UI Events स्पेसिफिकेशन के अनुसार डिप्रिकेटेड हैं, लेकिन पुरानी कोडबेस में अभी भी व्यापक रूप से उपयोग होती हैं। आधुनिक एप्लिकेशन को सिमेंटिक अर्थ (की क्या प्रोड्यूस करती है) के लिए key और फिज़िकल पोज़िशन (कौन सी फिज़िकल की दबाई गई) के लिए code को प्राथमिकता देनी चाहिए। उदाहरण के लिए, 'A' की Shift स्थिति के आधार पर key='a' या key='A' प्रोड्यूस करती है, लेकिन code='KeyA' हमेशा अपरिवर्तित रहता है।
कीबोर्ड इवेंट्स में location प्रॉपर्टी
location प्रॉपर्टी कीबोर्ड पर कई स्थानों पर मौजूद कीज़ के बीच अंतर करती है: बाईं Ctrl बनाम दाईं Ctrl, बाईं Shift बनाम दाईं Shift, और नमपैड डिजिट कीज़ बनाम टॉप-रो डिजिट्स। Location वैल्यू हैं: 0 (स्टैंडर्ड), 1 (बाईं ओर), 2 (दाईं ओर), और 3 (नमपैड)। यह खासतौर पर उपयोगी है जब यह पता लगाना हो कि यूज़र ने नमपैड Enter की दबाई या मेन Enter की।
मॉडिफायर कीज़ (Ctrl, Alt, Shift, Meta) हर कीबोर्ड इवेंट पर बूलियन फ्लैग के रूप में ट्रैक होती हैं, न कि केवल तब जब ये कीज़ अकेले दबाई जाती हैं। इसका मतलब है कि आप Ctrl+C जैसे कॉम्बिनेशन डिटेक्ट कर सकते हैं, भले ही आप मुख्य रूप से keyCode 67 (C) सुन रहे हों। Meta की Windows कीबोर्ड पर Windows की और Mac पर Command की से मेल खाती है।
कीबोर्ड इवेंट प्रॉपर्टीज़ के व्यावहारिक उपयोग के मामले
वेब ऐप्स में कीबोर्ड शॉर्टकट Ctrl+S (सेव) या Ctrl+Shift+P (कमांड पैलेट) जैसे कॉम्बिनेशन डिटेक्ट करने के लिए code (फिज़िकल की) और मॉडिफायर फ्लैग्स का कॉम्बिनेशन उपयोग करते हैं। key की जगह code का उपयोग करने से शॉर्टकट कीबोर्ड लोकेल की परवाह किए बिना काम करता है — फ्रेंच AZERTY लेआउट पर 'A' पोज़िशन की एक अलग कैरेक्टर प्रोड्यूस करती है, लेकिन code हमेशा 'KeyA' ही रहती है।
गेम कंट्रोल्स आमतौर पर WASD या एरो कीज़ को मूवमेंट से मैप करने के लिए code का उपयोग करते हैं, क्योंकि फिज़िकल पोज़िशन मायने रखती है न कि प्रोड्यूस्ड कैरेक्टर। एक्सेसिबिलिटी टूल्स Tab (code='Tab') और Enter (code='Enter') सुन सकते हैं ताकि इंटरेक्टिव एलिमेंट्स माउस के बिना एक्टिवेट हो सकें। यह टूल आपको इवेंट हैंडलर कोड लिखने से पहले किसी भी की के एग्ज़ैक्ट प्रॉपर्टी वैल्यू जल्दी से देखने देता है।
अक्सर पूछे जाने वाले प्रश्न
›keyCode और key में क्या अंतर है?
keyCode एक डिप्रिकेटेड इंटीजर प्रॉपर्टी है जो हर की को एक नंबर देती है (जैसे 'A' के लिए 65, Enter के लिए 13)। key आधुनिक रिप्लेसमेंट है जो प्रोड्यूस्ड कैरेक्टर ('a' या 'A') या नामित की स्ट्रिंग ('Enter', 'ArrowLeft') रिटर्न करती है। नए कोड में keyCode की जगह key या code का उपयोग करना चाहिए।
›code प्रॉपर्टी क्या है?
code कीबोर्ड लेआउट या मॉडिफायर स्थिति की परवाह किए बिना दबाई गई फिज़िकल की को पहचानती है। 'KeyA' हमेशा QWERTY कीबोर्ड पर 'A' पोज़िशन की को रेफर करती है, भले ही यूज़र AZERTY लेआउट पर हो जहाँ वह की 'Q' प्रोड्यूस करती है। लोकेल की परवाह किए बिना काम करने वाले कीबोर्ड शॉर्टकट के लिए code का उपयोग करें।
›keyCode डिप्रिकेटेड क्यों है?
keyCode विभिन्न ब्राउज़रों और ऑपरेटिंग सिस्टम में असंगत था, एक ही कीज़ के लिए अलग-अलग वैल्यू देता था, और नॉन-ASCII कैरेक्टर को अच्छी तरह हैंडल नहीं करता था। W3C UI Events स्पेसिफिकेशन ने इसे key (कैरेक्टर/नामित की के लिए) और code (फिज़िकल पोज़िशन के लिए) के पक्ष में डिप्रिकेट किया। keyCode और which दोनों अब स्पेसिफिकेशन में लेगेसी के रूप में मार्क हैं।
›location वैल्यू का क्या मतलब है?
Location कई पोज़िशन पर दिखने वाली कीज़ के बीच अंतर करती है। 0 = स्टैंडर्ड (मेन एरिया), 1 = बाईं मॉडिफायर की (जैसे बाईं Shift), 2 = दाईं मॉडिफायर की (जैसे दाईं Ctrl), 3 = नमपैड। इससे नमपैड 5 (code='Numpad5', location=3) और टॉप-रो 5 (code='Digit5', location=0) के बीच अंतर किया जा सकता है।
›JavaScript में Ctrl+S या अन्य शॉर्टकट कैसे डिटेक्ट करें?
keydown इवेंट सुनें और key/code और मॉडिफायर फ्लैग्स दोनों चेक करें: `if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveDocument(); }`। e.key === 's' का उपयोग करने से अपरकेस और लोअरकेस दोनों कैच होते हैं, क्योंकि मॉडिफायर स्थिति लेटर कीज़ के key वैल्यू को नहीं बदलती।
›charCode प्रॉपर्टी क्या है?
charCode लेगेसी keypress इवेंट द्वारा रिटर्न की जाती थी और टाइप किए गए कैरेक्टर का Unicode कोड पॉइंट देती थी (जैसे 'A' के लिए 65)। यह अब keypress इवेंट के साथ डिप्रिकेटेड है। keydown/keyup इवेंट्स में charCode हमेशा 0 होती है। इसकी जगह key या input इवेंट पर inputType का उपयोग करें।
›नमपैड और मेन कीबोर्ड की Enter को कैसे अलग करें?
दोनों कीज़ key='Enter' प्रोड्यूस करती हैं, लेकिन code में अंतर है: मेन Enter की code='Enter' के साथ location=0 है, जबकि नमपैड Enter की code='NumpadEnter' के साथ location=3 है। मेन की के लिए e.code === 'Enter' और नमपैड वर्ज़न के लिए e.code === 'NumpadEnter' चेक करें।
›Meta की क्या है?
Meta की Windows कीबोर्ड पर Windows की (⊞) और Mac कीबोर्ड पर Command की (⌘) है। कीबोर्ड इवेंट्स में, यह metaKey बूलियन फ्लैग द्वारा ट्रैक होती है और अकेले दबाने पर key='Meta' प्रोड्यूस करती है। इसका code 'MetaLeft' या 'MetaRight' है।
संबंधित टूल्स
अंतिम अपडेट: