कुंजी कोड फाइंडर

यह कैसे काम करता है

1. एक कुंजी दबाएँ: इनपुट क्षेत्र में क्लिक करें और कोई भी कुंजी दबाएँ, अक्षर, संख्या, फ़ंक्शन कुंजियाँ।
2. कुंजी कोड पढ़ें: टूल तुरंत event.key, event.code, event.keyCode (पुराना) और charCode मान प्रदर्शित करता है।
3. अपने कोड में उपयोग करें: अपने कीबोर्ड इवेंट लिसनर या कार्यान्वयन के लिए आवश्यक सटीक मान कॉपी करें।

कीकोड डिटेक्टर क्यों इस्तेमाल करें?

JavaScript कीबोर्ड इवेंट कई विभिन्न गुण उजागर करते हैं (key, code, keyCode, charCode और which) और यह जानना कि कौन सा उपयोग करना है।

विशेषताएँ

• सभी इवेंट गुण: प्रत्येक कुंजी दबाने के लिए event.key, event.code, event.keyCode, event.which और event.charCode प्रदर्शित करता है।
• मॉडिफ़ायर कुंजी पहचान: इंगित करता है कि Shift, Ctrl, Alt और Meta दबाने के दौरान दबाए गए थे या नहीं।
• विशेष कुंजी समर्थन: फ़ंक्शन कुंजियों (F1–F12), तीर, Enter, Escape, Tab आदि के साथ काम करता है।
• कुंजी इतिहास: कई कुंजियों की तुलना करने के लिए हाल के दबावों का लॉग रखता है।
• मान कॉपी करें: क्लिपबोर्ड पर सीधे कॉपी करने के लिए किसी भी मान पर क्लिक करें।

अक्सर पूछे जाने वाले प्रश्न

event.key और event.keyCode में क्या अंतर है?

event.key आधुनिक मानक है, यह "ArrowLeft" या "Enter" जैसी पठनीय स्ट्रिंग लौटाता है। event.keyCode एक पुराना संख्यात्मक कोड है।

Ctrl+S या अन्य कुंजी संयोजनों का पता कैसे लगाएँ?

कुंजी संयोजन event.key के साथ मॉडिफ़ायर जाँच का उपयोग करते हैं: if (event.ctrlKey && event.key === "s")। दबाएँ और परीक्षण करें।

कुछ कुंजियाँ समान keyCode क्यों दिखाती हैं?

keyCode मान मानकीकृत नहीं हुए और कुछ कुंजियाँ संदर्भ के आधार पर कोड साझा करती हैं। event.code अधिक विश्वसनीय है।

JavaScript में कीबोर्ड इवेंट का 30 साल का इतिहास

DOM में कीबोर्ड इवेंट्स का बदनाम रूप से अव्यवस्थित इतिहास है। Netscape Navigator 2 (1995) ने मूल onkeydown, onkeypress, और onkeyup हैंडलर्स को एक संख्यात्मक keyCode प्रॉपर्टी के साथ पेश किया, जिसका कोई स्पेक नहीं था; ब्राउज़रों ने प्रत्येक अपने स्वयं के मान बनाए। Internet Explorer 4 (1997) ने अपना स्वयं का संस्करण लागू किया event.keyCode को एकमात्र प्रॉपर्टी के रूप में, जबकि Netscape event.which से चिपका रहा। DOM Level 2 Events (W3C, नवंबर 2000) ने इवेंट फ्लो (कैप्चर/बबल) को मानकीकृत किया, लेकिन कीबोर्ड इवेंट्स को स्पष्ट रूप से इसलिए छोड़ दिया क्योंकि विक्रेता सहमत नहीं हो सकते थे। परिणाम: डेवलपर्स ने एक दशक से अधिक समय तक e.keyCode || e.which जैसा कोड लिखा। DOM Level 3 Events (W3C वर्किंग ड्राफ्ट 2003, अनुशंसा 2018) ने अंत में आधुनिक event.key (Unicode वर्ण या «ArrowLeft» जैसी नामित कुंजी) और event.code (लेआउट से स्वतंत्र भौतिक कुंजी स्थिति जैसे «KeyA») पेश किया, साथ ही keyCode, charCode, और which को बहिष्कृत किया। UI Events स्पेसिफिकेशन (W3C, चालू) इस कार्य का आधुनिक घर है। ब्राउज़र धीरे-धीरे पकड़ में आए: Chrome 51 (मई 2016), Firefox 47 (जून 2016), Safari 10.1 (मार्च 2017) सभी ने event.code समर्थन भेजा। विरासत keypress इवेंट beforeinput और input इवेंट्स के पक्ष में बहिष्कृत है।

5 प्रॉपर्टीज़, डिकोड की गई

• event.key (आधुनिक, इसका उपयोग करें)। उत्पादित वर्ण या नामित कुंजी। अक्षर और अंक आपको Unicode वर्ण देते हैं जो मॉडिफायर और लेआउट का सम्मान करते हैं (Shift+a = «A», AZERTY Q-स्थिति = «a»)। नामित कुंजियाँ «Enter», «Escape», «ArrowLeft», «F5», «Control» जैसे स्ट्रिंग हैं। UI Events में परिभाषित।
• event.code (आधुनिक, गेम्स के लिए उपयोग करें)। कीबोर्ड पर भौतिक कुंजी की पहचान करता है, लेआउट या मॉडिफायर से स्वतंत्र। उदाहरण: «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft»। WASD मूवमेंट, vim-शैली नेविगेशन, और शॉर्टकट के लिए इसका उपयोग करें जो कीबोर्ड लेआउट को अनदेखा करना चाहिए।
• event.keyCode (बहिष्कृत)। संख्यात्मक कोड। 13 = Enter, 27 = Escape, 32 = Space, 37-40 = Arrow Left/Up/Right/Down, 65-90 = A-Z, 112-123 = F1-F12। मान कभी मानकीकृत नहीं किए गए थे, अभिसरण के माध्यम से केवल ब्राउज़रों के बीच सुसंगत हुए। नए कोड में बचें।
• event.which (बहिष्कृत)। keyCode के बराबर Netscape। अधिकांश प्रिंट करने योग्य वर्णों और गैर-प्रिंट करने योग्य कुंजियों के लिए, keyCode के समान। पुराने polyfill e.keyCode || e.which ने उन मामलों को संभाला जहाँ एक 0 था।
• event.charCode (बहिष्कृत, केवल keypress पर)। वर्ण का Unicode कोड बिंदु। «a» के लिए 97, «A» के लिए 65। केवल keypress पर फायर करता है (जो स्वयं बहिष्कृत है)। input और beforeinput इवेंट्स आधुनिक प्रतिस्थापन हैं।
• मॉडिफायर बूलियन। event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (macOS पर Command, Windows पर Windows कुंजी)। हमेशा मॉडिफायर्स को स्पष्ट रूप से चेक करें: क्रॉस-प्लेटफ़ॉर्म «सेव» (Mac पर Cmd+S, Windows/Linux पर Ctrl+S) के लिए e.metaKey || e.ctrlKey।
• event.location। बाएँ बनाम दाएँ मॉडिफायर और नंपैड को अलग करता है। 0=मानक, 1=बायाँ मॉडिफायर, 2=दायाँ मॉडिफायर, 3=नंपैड। गेमिंग लेआउट के लिए बाएँ-Shift बनाम दाएँ-Shift को अलग करने के लिए उपयोगी।

कीकोड लुकअप वास्तव में कहाँ मायने रखता है

• एप्लिकेशन कीबोर्ड शॉर्टकट। सेव के लिए Cmd/Ctrl+S, अनडू के लिए Cmd/Ctrl+Z, कमांड पैलेट खोलने के लिए Cmd/Ctrl+K (Slack, Linear, GitHub, Notion सभी 2020 के आसपास से इसका उपयोग करते हैं)। हमेशा प्रिंट करने योग्य कुंजी के लिए event.key और मेटा कुंजी के लिए मॉडिफायर बूलियन का उपयोग करें।
• कमांड पैलेट और फ़ज़ी फाइंडर। Slack (2014) और Linear (2019) द्वारा लोकप्रिय Cmd+K पैटर्न। ओपन शॉर्टकट को विश्व स्तर पर सुनें, फिर ArrowUp/ArrowDown नेविगेशन को संभालें, चयन करने के लिए Enter, खारिज करने के लिए Escape।
• ब्राउज़र गेम और HTML5 गेम विकास। Phaser, Babylon.js, Three.js। मूवमेंट कुंजियों के लिए हमेशा event.code का उपयोग करें ताकि WASD AZERTY कीबोर्ड पर काम करे (जहाँ «W» «Z» स्थिति में है)। Sebastian Lague, Notch (प्रारंभिक Minecraft प्रोटोटाइप), और itch.io गेम सभी इस AZERTY जाल में पड़े।
• एक्सेसिबिलिटी पैटर्न। मोडल डायलॉग्स को बंद करने के लिए Escape चाहिए। Combobox विजेट्स को ArrowDown/ArrowUp/Enter/Escape चाहिए। टूलटिप्स को Escape पर खारिज करना चाहिए। WAI-ARIA Authoring Practices Guide प्रत्येक सामान्य विजेट के लिए कीबोर्ड इंटरैक्शन पैटर्न को परिभाषित करता है; event.key उन जाँचों के लिए मानक है।
• टेक्स्ट एडिटर और कोड एडिटर कार्यान्वयन। Monaco (ब्राउज़र में VS Code का एडिटर), CodeMirror, ProseMirror, Lexical सभी कीबोर्ड इवेंट्स को कमांड्स में मैप करते हैं। वे vim/emacs-शैली कुंजी बाइंडिंग के लिए event.code का उपयोग करते हैं जो लेआउट पर निर्भर नहीं करते हैं।
• फॉर्म UX सुधार। Enter पर सबमिट, Escape पर ब्लर, Tab पर फोकस आगे बढ़ाएं। चेकआउट फ्लो, सर्च बार, ऑटोकंप्लीट फ़ील्ड में सामान्य।
• ब्राउज़र एक्सटेंशन हॉटकीज़। Vimium, SurfingKeys, Tridactyl पूरे वेब के लिए कीबोर्ड नेविगेशन प्रदान करते हैं। वे दस्तावेज़ स्तर पर सुनते हैं और जटिल मोडल कुंजी अनुक्रमों (gg = शीर्ष पर जाएँ, vim की तरह) को संभालते हैं।

कीबोर्ड इवेंट हैंडलिंग में सामान्य गलतियाँ

• नए कोड में keyCode का उपयोग। DOM Level 3 (2018) के बाद से बहिष्कृत, ऐतिहासिक रूप से ब्राउज़रों के बीच असंगत, और गैर-US लेआउट पर टूटता है (कॉमा कुंजी का US पर keyCode 188, कुछ जर्मन कीबोर्ड पर 191 है)। इसके बजाय event.key का उपयोग करें।
• गेम मूवमेंट के लिए e.key === "w" हार्डकोडिंग। AZERTY (फ्रेंच) कीबोर्ड पर, भौतिक W कुंजी «z» टाइप करती है। खिलाड़ी WASD क्लस्टर के रूप में याद रखी गई चीज़ के लिए पहुँचते हैं लेकिन गलत इनपुट मिलता है। इसके बजाय event.code === "KeyW" का उपयोग करें, जो भौतिक स्थिति की पहचान करता है।
• «सेव» के लिए केवल ctrlKey की जाँच। macOS पर, Cmd+S कन्वेंशन है; ctrlKey गलत है लेकिन metaKey सही है। हमेशा दोनों जाँचें: (e.metaKey || e.ctrlKey) && e.key === "s"।
• ब्राउज़र-आरक्षित शॉर्टकट पर preventDefault भूलना। preventDefault के बिना Cmd+S को हाईजैक करना अभी भी Save Page As ट्रिगर करता है। Cmd+P (प्रिंट), Ctrl+F (ब्राउज़र खोज), Ctrl+N (नई विंडो, वैसे भी ब्लॉक नहीं किया जा सकता), Ctrl+Tab (Chrome आपको नहीं देगा) के लिए भी वही। हैंडलर में e.preventDefault() कॉल करें।
• IME रचना को अनदेखा करना। जापानी, चीनी, कोरियाई इनपुट विधियाँ (IME) उपयोगकर्ता के वर्ण रचना करते समय keydown इवेंट्स फायर करती हैं। अपने शॉर्टकट हैंडलर को फायर करने से पहले e.isComposing की जाँच करें या compositionend इवेंट का उपयोग करें। Slack ने 2017 में जापानी उपयोगकर्ताओं के लिए इसे प्रसिद्ध रूप से गड़बड़ कर दिया।
• बहिष्कृत keypress इवेंट का उपयोग। केवल वर्ण-उत्पादक कुंजियों के लिए फायर करता है (तीर कुंजियाँ, फ़ंक्शन कुंजियाँ आदि नहीं)। बहिष्कृत; शॉर्टकट के लिए keydown और टेक्स्ट परिवर्तनों के लिए input/beforeinput का उपयोग करें।
• प्रत्येक दोहराव पर शॉर्टकट ट्रिगर करना। एक कुंजी दबाए रखने से keydown इवेंट्स बार-बार फायर होते हैं। टॉगल क्रियाओं (पैलेट खोलें, टैब स्विच करें) के लिए, e.repeat की जाँच करें और जल्दी बाहर निकलें ताकि उपयोगकर्ता द्वारा गलती से कुंजी पकड़ने पर 30 «खोलें» कमांड पंजीकृत होने से बच सकें।

अधिक अक्सर पूछे जाने वाले प्रश्न

जब उपयोगकर्ता के पास गैर-US कीबोर्ड हो तो मेरा कुंजी हैंडलर क्यों फायर नहीं होता?

लगभग हमेशा क्योंकि आप event.key को एक ऐसे वर्ण के लिए जाँच रहे हैं जो उस लेआउट पर केवल Shift के साथ मौजूद है। जर्मन QWERTZ कीबोर्ड पर, «/» Shift+7 है (अपनी कुंजी नहीं); फ्रेंच AZERTY पर, अंक 0-9 Shift+ऊपर-की-पंक्ति के साथ टाइप किए जाते हैं। स्थिति-आधारित शॉर्टकट के लिए event.code (भौतिक कुंजी) का उपयोग करें, या सामग्री-आधारित शॉर्टकट (जहाँ आप वास्तव में चाहते हैं कि उपयोगकर्ता ने अभी जो वर्ण टाइप किया) के लिए event.key।

मैं प्लेटफ़ॉर्म पर लगातार Cmd+K / Ctrl+K कैसे संभालूँ?

मानक मुहावरा: if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }। macOS पर, e.metaKey Cmd कुंजी है; Windows/Linux पर, e.ctrlKey उपयोगकर्ता की अपेक्षा है। दोनों स्वीकार करें। हमेशा preventDefault क्योंकि ब्राउज़र कुछ ब्राउज़रों में Cmd+K को «एड्रेस बार फोकस» से बांधता है। कुंजी-होल्ड पर फायरिंग से बचने के लिए !e.repeat जोड़ें।

क्या JavaScript पृष्ठ के बाहर वैश्विक कीस्ट्रोक्स का पता लगा सकता है?

नहीं, और यह सुरक्षा के लिए डिज़ाइन द्वारा है। ब्राउज़र केवल केंद्रित पृष्ठ या तत्व के लिए कीबोर्ड इवेंट्स फायर करता है। ब्राउज़र एक्सटेंशन chrome.commands API का उपयोग करके व्यापक दायरे के साथ सुन सकते हैं। नेटिव ऐप्स Electron, Tauri आदि में OS-स्तरीय वैश्विक हुक का उपयोग कर सकते हैं। बैंकिंग और 2FA ऐप्स इस अलगाव पर निर्भर करते हैं: एक दुर्भावनापूर्ण टैब आपके पासवर्ड मैनेजर को कीलॉग नहीं कर सकता।

«अभी दबाया» बनाम «पकड़े जा रहा है» का पता लगाने का सही तरीका क्या है?

टॉगल के लिए, keydown हैंडलर में !e.repeat की जाँच करें, पहले इवेंट में repeat: false है, बाद के ऑटो-रिपीट इवेंट्स में repeat: true है। निरंतर क्रियाओं (गेम मूवमेंट) के लिए, सेट में कुंजी स्थिति को ट्रैक करें: keydown पर जोड़ें, keyup पर हटाएँ, फिर अपने रेंडर लूप में keysHeld.has("KeyW") की जाँच करें। यह इनपुट को फ्रेम रेट से अलग करता है और कई एक साथ कुंजियों (हिलाना + कूदना) को संभालता है।

जब मैं यहाँ कुंजियाँ दबाता हूँ तो क्या कुछ सर्वर पर भेजा जाता है?

नहीं। कुंजी इवेंट्स JavaScript द्वारा स्थानीय रूप से कैप्चर किए जाते हैं और बिना किसी नेटवर्क अनुरोध के इस पृष्ठ पर प्रदर्शित किए जाते हैं। DevTools में Network टैब खोलें, टाइप करें; आप शून्य आउटबाउंड ट्रैफ़िक देखेंगे। किसी भी संदर्भ में परीक्षण के लिए सुरक्षित, जिसमें खोजना शामिल है कि आपके कीबोर्ड पर पासवर्ड या संवेदनशील शॉर्टकट क्या उत्पन्न करते हैं।