कोई कुंजी दबाएं और परिणामस्वरूप KeyboardEvent की हर प्रॉपर्टी पढ़ें: key, code, keyCode, which, location और ctrl, shift, alt और meta झंडे, प्लस कॉपी करने योग्य JSON।
एक कुंजी दबाएं। देखें ब्राउज़र ठीक क्या रिपोर्ट करता है। नीचे दिए गए कैप्चर क्षेत्र पर क्लिक करें और कोई भी कुंजी या संयोजन दबाएं। KeyboardEvent की हर प्रॉपर्टी एक साथ दिखाई जाती है, ताकि आप अपने शॉर्टकट हैंडलर के लिए सही वाला चुन सकें अनुमान लगाने के बजाय।
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
दबी हुई मॉडिफ़ायर
कोई नहीं
key, code और keyCode एक ही चीज़ नहीं हैं
तीन प्रॉपर्टीज़, तीन अलग-अलग प्रश्न
एक KeyboardEvent किसी कुंजी की पहचान करने के कई तरीके उजागर करता है, और वे वास्तव में अलग-अलग प्रश्नों के उत्तर देते हैं। event.key वह अक्षर या नामित मान है जो लेआउट और मॉडिफ़ायर लागू होने के बाद कीप्रेस द्वारा उत्पन्न होता है। भौतिक A कुंजी दबाने से a मिलता है, या shift दबे होने पर A, या Dvorak या AZERTY लेआउट पर पूरी तरह अलग अक्षर। नामित कुंजियाँ वर्णनात्मक स्ट्रिंग्स के रूप में आती हैं जैसे Enter, Escape, ArrowLeft और F5।
event.code भौतिक कुंजी स्थिति की पहचान करता है, एक काल्पनिक US कीबोर्ड से लिए गए लेआउट-स्वतंत्र नाम का उपयोग करके। A की स्थिति वाली कुंजी हमेशा KeyA है, चाहे उपयोगकर्ता का लेआउट कुछ भी उत्पन्न करे। शीर्ष पंक्ति के अंक Digit1 से Digit0 हैं, और न्यूमेरिक कीपैड Numpad1 और साथियों को रिपोर्ट करता है ताकि आप दो अंक पंक्तियों को अलग पहचान सकें।
event.keyCode और इसका जुड़वाँ event.which विरासत सांख्यिक पहचानकर्ता हैं। दोनों औपचारिक रूप से अप्रचलित हैं, दोनों अभी भी हर जगह कार्यान्वित हैं, और दोनों विराम चिह्नों के लिए ब्राउज़रों में असंगत हैं। पुराने कोड को बनाए रखते समय इन्हें पढ़ना उपयोगी है, लेकिन नए शॉर्टकट हैंडलिंग को key या code का उपयोग करना चाहिए।
key और code के बीच चुनना
नियम सीधा है: जब स्थिति मायने रखती है तो code का उपयोग करें और जब अर्थ मायने रखता है तो key का। एक गेम जो आंदोलन को WASD से बांधता है वह code चाहता है, क्योंकि खिलाड़ी के बाईं ओर का भौतिक समूह AZERTY कीबोर्ड पर भी उसी जगह रहना चाहिए भले ही वह ZQSD उत्पन्न करे। एक टेक्स्ट एडिटर जो "सेव" को Ctrl+S से बांधता है वह key चाहता है, क्योंकि उपयोगकर्ता अक्षर S के संदर्भ में सोचता है न कि A के पास वाली कुंजी के।
मॉडिफ़ायर झंडे अलग बूलियन हैं: ctrlKey, shiftKey, altKey और metaKey। इन्हें key से अनुमान लगाने के बजाय स्पष्ट रूप से परीक्षण करें, और याद रखें कि प्राथमिक शॉर्टकट मॉडिफ़ायर macOS पर Command है और अन्य जगह Control। एक सामान्य पैटर्न event.metaKey || event.ctrlKey स्वीकार करना है ताकि एक हैंडलर दोनों प्लेटफ़ॉर्म को कवर करे।
event.location डुप्लिकेट कुंजियों को अलग करता है। यह एक मानक कुंजी के लिए 0 है, 1 एक जोड़ी (जैसे बायाँ Shift) के बाएँ सदस्य के लिए, 2 दाएँ सदस्य के लिए, और 3 न्यूमेरिक कीपैड पर किसी कुंजी के लिए।
व्यावहारिक गलतियाँ
हर कुंजी वे इवेंट उत्पन्न नहीं करती जिनकी आप अपेक्षा करते हैं। ब्राउज़र कुछ संयोजनों को अपने लिए आरक्षित रखता है - Ctrl+W, Ctrl+T और Command+Q आम तौर पर टैब बंद कर देते हैं या एप्लिकेशन को बंद कर देते हैं इससे पहले कि कोई पेज उन्हें देखे, और preventDefault उन्हें वापस नहीं ले सकता। किसी भी शॉर्टकट को वास्तविक ब्राउज़र विंडो में परीक्षण करें, यह मानने के बजाय कि वह आपके हैंडलर तक पहुँच जाएगा।
किसी कुंजी को दबाए रखने से event.repeat को सत्य पर सेट करते हुए पुनरावृत्ति इवेंट्स की एक धारा उत्पन्न होती है। जब शॉर्टकट एक बार फायर होना चाहिए तो पुनरावृत्तियों को अनदेखा करें, और जब व्यवहार निरंतर हो, जैसे स्क्रॉल करना या कर्सर हिलाना, तो उनका सम्मान करें।
अंत में, keydown और keyup कुंजियों का वर्णन करते हैं, जबकि keypress वर्णों का वर्णन करता था और मानक से हटा दिया गया है। टेक्स्ट इनपुट के लिए, input इवेंट को सुनना या beforeinput पढ़ना पसंद करें, जो संयोजन, ऑटोकम्प्लीट और मोबाइल कीबोर्ड को किसी भी कुंजी-स्तरीय इवेंट की तुलना में कहीं अधिक विश्वसनीय रूप से संभालते हैं।
FAQ
क्या मुझे किसी कीबोर्ड शॉर्टकट के लिए key या code का उपयोग करना चाहिए?
जब भौतिक स्थिति मायने रखती है, जैसे गेम में WASD आंदोलन, तो `code` का उपयोग करें। जब अर्थ मायने रखता है, जैसे सेव के लिए Ctrl+S, तो `key` का उपयोग करें, ताकि शॉर्टकट उपयोगकर्ता के अपने लेआउट का अनुसरण करे।
keyCode अप्रचलित है फिर भी काम क्यों कर रहा है?
यह लेआउट-जागरूक इवेंट्स से पुराना है और विराम चिह्नों के लिए ब्राउज़रों में असंगत संख्याएँ लौटाता है। संगतता के लिए हर इंजन इसे कार्यान्वित करता है, लेकिन विनिर्देश नए कोड को `key` और `code` की ओर निर्देशित करता है।
जब मैं Ctrl+W या Command+Q दबाता हूँ तो कुछ नहीं होता।
वे संयोजन ब्राउज़र या ऑपरेटिंग सिस्टम द्वारा लिए जाते हैं और पेज के उन्हें प्राप्त करने से पहले संभाले जाते हैं। किसी सामान्य वेब पेज से उन्हें इंटरसेप्ट करने का कोई विश्वसनीय तरीका नहीं है।
मैं macOS और Windows पर काम करने वाला एक शॉर्टकट कैसे लिखूँ?
`event.metaKey || event.ctrlKey` का परीक्षण करके किसी भी प्राथमिक मॉडिफ़ायर को स्वीकार करें। यह macOS पर Command और Windows व Linux पर Control पर मैप होता है बिना उपयोगकर्ता एजेंट पर शाखा बनाए।
location 3 का क्या अर्थ है?
कुंजी न्यूमेरिक कीपैड पर है। location 1 और 2 का अर्थ है डुप्लिकेट जोड़ी (जैसे Shift या Control) का बायाँ और दायाँ सदस्य, और 0 का अर्थ है कोई सामान्य कुंजी जिसकी कोई प्रतिलिपि नहीं है।
क्या मैं इसका उपयोग कोई टेक्स्ट इनपुट हैंडलर बनाने के लिए कर सकता हूँ?
`input` इवेंट सुनना बेहतर है। की इवेंट्स IME कीबोर्ड से संयोजन, ऑटोकम्प्लीट और कई मोबाइल वर्चुअल कीबोर्ड को चूक जाते हैं, जिन सभी को `input` सही ढंग से रिपोर्ट करता है।