की कोड दर्शक

की कोड दर्शक क्या है?#

जब कोई कुंजी नीचे जाती है, तो ब्राउज़र एक KeyboardEvent फ़ायर करता है जो “कौन-सी कुंजी?” के दो समानांतर उत्तर लेकर जाता है। key फ़ील्ड कहती है कि दबाव ने कौन-सा अक्षर उत्पन्न किया — a, A, Enter, ?। code फ़ील्ड कहती है कि कौन-सी भौतिक कुंजी दबाई गई — KeyA, Enter, Slash — layout से स्वतंत्र। ये दोनों उत्तर तब अलग हट जाते हैं जब आप कोई अंतरराष्ट्रीय कीबोर्ड, modifier, या numpad शामिल करते हैं, और यही अंतर देखना आवश्यक है जब आप कोई शॉर्टकट, गेम नियंत्रण, या सहूलियत सुविधा तार रहे होते हैं।

यह पेज प्रत्येक keydown को एक स्नैपशॉट में कैप्चर करता है और हर फ़ील्ड खुला रखता है: key, code, लिगेसी keyCode और which संख्याएँ (पुराने कोड डिबग करने के लिए रखी गई), location (standard / left / right / numpad), सक्रिय modifiers, और कि दबाव कोई auto-repeat था या नहीं। अंतिम दबावों का एक घूर्णी इतिहास दृश्य रहता है ताकि आप किसी chord या अनुक्रम का पता लगा सकें।

कुछ भी वैश्विक नहीं है: कैप्चर केवल तब होता है जब focus कैप्चर ज़ोन के भीतर है, इसलिए पेज का बाकी हिस्सा सामान्य रूप से कीबोर्ड का पालन करता रहता है।

इसका उपयोग कैसे करें#

1. शीर्ष पर डैश वाले कैप्चर ज़ोन में कहीं भी क्लिक करें (या इसमें tab करें)। यह सुन रहा है दिखाने के लिए हाइलाइट होता है।
2. एक कुंजी, या एक chord दबाएँ। नीचे की स्नैपशॉट तालिका हर keydown पर अद्यतन होती है।
3. पंक्तियाँ पढ़ें:
   • key — लॉजिकल कुंजी मान (अक्षर या नामित कुंजी जिसे ब्राउज़र हल करता है)।
   • code — भौतिक कुंजी, layout-स्वतंत्र। यही है जिस पर आप शॉर्टकट के लिए मैच करते हैं।
   • keyCode और which — अप्रचलित संख्यात्मक कोड, एक अप्रचलित बैज के साथ चिह्नित। इनसे केवल तब मैच करें जब पुराना कोड स्थानांतरित कर रहे हों जो अभी भी इन्हें पढ़ता है।
   • location — standard, left, right, या numpad। इसीसे आप बाएँ-Shift को दाएँ-Shift से, या numpad 5 को ऊपरी-पंक्ति 5 से अलग करते हैं।
   • repeat — हाँ जब कोई कुंजी दबाई जा रही है और auto-repeat हो रहा है।
   • modifiers — जो भी Ctrl, Alt, Shift, Meta दबाए गए थे उनके लिए बैज।
4. यदि आप चाहते हैं कि पेज ब्राउज़र को कुंजी पर क्रिया करने से रोके तो विकल्प पट्टी में कुंजी की डिफ़ॉल्ट क्रिया रोकें चुनें (उदाहरण के लिए, परीक्षण करते समय Tab को focus दूर ले जाने से रोकने के लिए)।
5. वर्तमान स्नैपशॉट लेने के लिए वर्तमान कॉपी करें उपयोग करें, और घूर्णी सूची रीसेट करने के लिए इतिहास पैनल पर इतिहास साफ़ करें।

मुख्य विशेषताएँ#

• key और code दोनों, साथ-साथ। कीबोर्ड हैंडलिंग में सबसे उपयोगी भेद, हर दबाव पर दृश्य — ताकि आप तुरंत देखें कि key === "@" एक layout पर Shift+Digit2 से क्यों आ सकता है और दूसरे पर एक पूरी तरह भिन्न भौतिक कुंजी से।
• स्थान जागरूकता। बाएँ और दाएँ modifiers अलग रिपोर्ट होते हैं, और numpad कुंजी location: numpad लेकर जाती हैं। गेमिंग लेआउट के लिए आवश्यक जहाँ एक ही अंक का अर्थ मुख्य पंक्ति बनाम numpad पर भिन्न होता है।
• Modifier बैज। Ctrl, Alt, Shift, और Meta (macOS पर Command, और कहीं और Super/Windows) पारंपरिक क्रम में दिखाए जाते हैं, ताकि आप एक chord को एक नज़र में पढ़ सकें।
• लिगेसी फ़ील्ड, स्पष्ट रूप से चिह्नित। keyCode और which अप्रचलित हैं और आधुनिक स्पेक्स से हटाए गए, किंतु बहुत सारे मौजूदा कोड अभी भी इन्हें पढ़ते हैं। इन्हें एक दृश्य अप्रचलित टैग और फुटनोट के साथ सामने लाया जाता है, कभी प्राथमिक उत्तर के रूप में नहीं।
• 20 का घूर्णी इतिहास। एक कुंजी दबाए रखें और देखें हर auto-fire पर repeat हाँ पर पलटता है; एक अनुक्रम दबाएँ और इसके माध्यम से वापस चलें। प्रत्येक प्रविष्टि एक पृथक स्नैपशॉट है।
• स्कोप्ड कैप्चर। listener कैप्चर ज़ोन से बंधा है, window से नहीं। पेज का बाकी — tabbing, scrolling — तब तक काम करता रहता है जब तक आप ज़ोन पर फिर से focus न करें।

विस्तृत उदाहरण#

भ्रम का एक क्लासिक स्रोत ऊपरी-पंक्ति 1 और numpad 1 के बीच का अंतर है। वे एक ही अक्षर उत्पन्न करते हैं, किंतु एक ही कुंजी नहीं हैं।

ऊपरी-पंक्ति 1 दबाएँ और स्नैपशॉट पढ़ता है:

key        1
code       Digit1
keyCode    49      (legacy)
which      49      (legacy)
location   standard
repeat     no
modifiers  none

अब numpad 1 दबाएँ (Num Lock चालू के साथ) और स्नैपशॉट पढ़ता है:

key        1
code       Numpad1
keyCode    97      (legacy)
which      97      (legacy)
location   numpad
repeat     no
modifiers  none

समान key, भिन्न code, भिन्न location, भिन्न लिगेसी कोड। यदि आप कोई शॉर्टकट बाँध रहे हैं, तो आप “अक्षरों के ऊपर की पंक्ति” के अर्थ में code === "Digit1" पर मैच करते हैं, और “numpad” के अर्थ में code === "Numpad1" — और आप key === "1" पर मैच करने के जाल से बचते हैं, जो दोनों के लिए फ़ायर होता है।

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

मुझे key या code पर मैच करना चाहिए?#

यह इस बात पर निर्भर करता है कि आप क्या बना रहे हैं। शॉर्टकट और गेम नियंत्रणों के लिए code पर मैच करें, जहाँ कुंजी की भौतिक स्थिति मायने रखती है और आप नहीं चाहते कि बाइंडिंग बदले जब उपयोगकर्ता Dvorak या ग़ैर-लातीनी layout पर स्विच करे। पाठ इनपुट के लिए key पर मैच करें, जहाँ उत्पन्न अक्षर है जिसकी आप परवाह करते हैं (? बनाम /, या dead-key संरचित अक्षर)। modifier chords के लिए, modifier के अपने key मान के बजाय modifier फ़्लैग्स (ctrlKey, metaKey, …) जाँचें।

keyCode और which “अप्रचलित” क्यों चिह्नित हैं?#

वे UI Events स्पेक से अप्रचलित और हटाए गए हैं। ब्राउज़र संगतता के लिए अभी भी इन्हें भरते हैं, किंतु उनके मान कभी ब्राउज़रों या layout में सुसंगत नहीं थे (एक ही भौतिक कुंजी भिन्न संख्याएँ रिपोर्ट कर सकती थी)। आधुनिक कोड को key और code पढ़ना चाहिए। वे यहाँ केवल इसलिए दिखाए जाते हैं ताकि आप पुराने कोड को डिबग या स्थानांतरित कर सकें जो अभी भी संख्याओं पर निर्भर है — नई बाइंडिंग के लिए कभी उनका उपयोग न करें।

पेज मेरे कीस्ट्रोक को क्यों नहीं कैप्चर करता?#

कैप्चर डैश वाले ज़ोन तक सीमित है। यदि focus कहीं और चला गया है — क्योंकि आप tab से बाहर गए, या किसी अन्य नियंत्रण पर क्लिक किया — तो ज़ोन सुनना बंद कर देता है। ज़ोन के भीतर वापस क्लिक करें (यह हाइलाइट होगा) और दबाव फिर से रजिस्टर होते हैं। यह स्कोपिंग जानबूझकर है: यह पेज के बाकी हिस्से को कीबोर्ड-सुलभ रखती है।

क्या Meta कुंजी का अर्थ Command या Windows है?#

दोनों — Meta प्लेटफ़ॉर्म की “super” कुंजी है: macOS पर Command, Linux और Windows पर Windows / Super कुंजी। बैज Meta पढ़ता है बजाय OS का अनुमान लगाने के, क्योंकि अंतर्निहित metaKey फ़ील्ड है जिसका आपके कोड को वास्तव में परीक्षण के लिए आवश्यकता है।