.keyCode बनाम। जो

Question

मैंने सोचा कि इसका जवाब स्टैक ओवरफ्लो पर कहीं दिया जाएगा, लेकिन मुझे यह नहीं मिल रहा है।

यदि मैं एक कीप इवेंट के लिए सुन रहा हूँ, तो क्या मुझे यह प्रयोग करना चाहिए .keyCodeया .whichयह निर्धारित करने के लिए कि क्या एंटर की को दबाया गया है?

मैंने हमेशा निम्नलिखित की तरह कुछ किया है:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

लेकिन मैं ऐसे उदाहरण देख रहा हूं जो .whichइसके बजाय उपयोग करते हैं .keyCode। क्या फर्क पड़ता है? क्या एक क्रॉस-ब्राउज़र दूसरे की तुलना में अनुकूल है?

Comments

इन दोनों को अब वित्तपोषित माना जाता है। developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

— CodeFinity

Answer 1

नोट: इस सवाल का जवाब नीचे बाद में 2010 यहाँ कई वर्षों में लिखा गया था, दोनों keyCodeऔर whichके पक्ष में पदावनत कर रहे हैं key(तार्किक कुंजी के लिए) और code(कुंजी के भौतिक स्थान के लिए)। लेकिन ध्यान दें कि IE समर्थन नहीं करता है code, और इसका समर्थन keyयुक्ति के पुराने संस्करण पर आधारित है, इसलिए यह बहुत सही नहीं है। मैं इस बारे में के रूप में, वर्तमान EdgeHTML और चक्र के आधार पर एज का समर्थन नहीं करता codeहै या तो है, लेकिन माइक्रोसॉफ्ट ने अपने चल रहा है Blink - और वी 8 - एज के लिए आधारित प्रतिस्थापन है, जो संभवतः करता है / होगा।

---

कुछ ब्राउज़र उपयोग करते हैं keyCode, अन्य उपयोग करते हैं which।

यदि आप jQuery का उपयोग कर रहे हैं, तो आप मज़बूती से उपयोग कर सकते हैं whichक्योंकि jQuery चीजों को मानकीकृत करता है ; यहां अधिक।

यदि आप jQuery का उपयोग नहीं कर रहे हैं, तो आप यह कर सकते हैं:

var key = 'which' in e ? e.which : e.keyCode;

या वैकल्पिक रूप से:

var key = e.which || e.keyCode || 0;

... जो संभावना को संभालता e.whichहै 0( जावास्क्रिप्ट को शक्तिशाली रूप से शक्तिशाली ऑपरेटर का0 उपयोग करके अंत में इसे पुनर्स्थापित करके ) हो सकता है।||

Comments

धन्यवाद TJ मुझे इसके लिए एक संदर्भ कहां मिलेगा? ऐसा नहीं है कि मुझे आप पर विश्वास नहीं है, मैं बस उत्सुक हूँ! ... मैं आपको देखता हूं कि बस, धन्यवाद। तो, यहां तक ​​कि उन लोगों के लिए जो jquery का उपयोग नहीं कर रहे हैं, जो एक बेहतर विकल्प है?

— स्कॉट डे

@ स्थिति: यदि jQuery का उपयोग नहीं कर रहे हैं, तो आपको इसे स्वयं स्पष्ट रूप से संभालना होगा। मैं आमतौर पर इसे इस तरह से करता हूं var key = event.which || event.keyCode;कि event.whichअगर यह परिभाषित किया गया है तो इसका उपयोग नहीं किया जाएगा, या event.keyCodeयदि whichयह अपरिभाषित या गलत नहीं है। तकनीकी रूप से मुझे शायद करना चाहिए var key = typeof event.which === "undefined" ? event.keyCode : event.which;लेकिन अगर event.whichयह है 0(क्या यह हो सकता है 0?), मैं उन चीजों के प्रकार की देखभाल करने की संभावना नहीं हूं जो मैं करता हूं।

— टीजे क्राउडर

@ScottE, यहां एक मूल संदर्भ दिया गया है: quirksmode.org/js/keys.html (इसमें वह शामिल नहीं है which, जो मुझे लगता है कि केवल jQuery द्वारा प्रदान किया गया है, लेकिन मैं 100% निश्चित नहीं हूं, लेकिन यह आपको देखकर शुरू कर देना चाहिए ब्राउज़रों में अंतर)

— Mottie

@fudgey: IE को छोड़कर सभी ब्राउज़रों द्वारा whichप्रदान किया keypressजाता है। और quirksmode यहाँ आधिकारिक नहीं है। संदर्भ के रूप में, @TJ Crowder ने जो लिंक पोस्ट किया है वह बहुत बेहतर है: unixpapa.com/js/key.html ।

— टिम डाउन

@ टीजे क्राउडर: हां, घटना की whichसंपत्ति शून्य हो सकती है, और यह अधिकांश अनुप्रयोगों के लिए एक बड़ा अंतर बना सकता है। उदाहरण के लिए, फ़ायरफ़ॉक्स में गैर-मुद्रण योग्य कुंजियों में whichशून्य की संपत्ति होती है और जैसी ही keyCodeसंपत्ति होती है keydown। होम कुंजी keyCodeमें फ़ायरफ़ॉक्स में मेरे पीसी पर 36 की संख्या है, जो "$" के लिए वर्ण कोड है, जो होम कुंजी दबाने वाले उपयोगकर्ता और $ $ का उपयोग कर टाइप करने वाले उपयोगकर्ता के बीच अंतर करना असंभव बना देगा event.which || event.keyCode।

— टिम डाउन

Answer 2

jQuery सामान्य के event.whichआधार पर सामान्य है event.which, event.keyCodeया event.charCodeब्राउज़र द्वारा समर्थित है:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

इसका एक अतिरिक्त लाभ .whichयह है कि jQuery माउस क्लिक के लिए भी इसे करता है:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Comments

var key = event.which || event.charCode || event.keyCode

— ऐनी वैन रोसुम

@ anne-van-rossum, event.wich == null && ...केवल अशक्त या अपरिभाषित के लिए परीक्षण करें। आपके event.wich || ...लिए परीक्षण falsy (अपरिभाषित, अशक्त, झूठे, 0, '', आदि)

— aMarCruz

उद्देश्य पर @aMarCruz झूठा। वेबकिट रिपोर्टिंग के साथ Eg Bugs.webkit.org/show_bug.cgi?id=167350 । और मुझे नहीं लगता कि जाँच करना ""या []चोट पहुँचाना।

— ऐनी वैन रोसुम

Answer 3

यदि आप वेनिला जावास्क्रिप्ट में रह रहे हैं, तो कृपया ध्यान दें कि कीकोड अब हटा दिया गया है और गिरा दिया जाएगा:

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

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

इसके बजाय या तो का उपयोग करें: .key या .code क्या व्यवहार आप चाहते हैं पर निर्भर करता है: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / वेब / एपीआई / KeyboardEvent / कुंजी

दोनों आधुनिक ब्राउज़रों पर लागू किए गए हैं।

Comments

.code जबकि कुंजीपटल पर कुंजी की भौतिक स्थिति से मेल खाती है .key कुंजी द्वारा उत्पन्न चरित्र से मेल खाती स्थान की परवाह किए बिना दबाया।

— क्रिस्टोफर

'कोड' और 'की' दोनों के आधुनिक ब्राउज़रों में बोली है। MDN developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code पर विभिन्न ब्राउज़रों में "इसे आज़माएं" उदाहरण का उपयोग यह दर्शाता है कि IE11 / IE एज 'कोड' और 'कुंजी' को लागू नहीं करते हैं। कार्यान्वयन क्रोम / एफएफ / सफारी में कार्यान्वयन से मेल नहीं खाता (अंतर मुख्य रूप से एस्केप और एंटर जैसे नियंत्रण वर्णों में दिखाई देते हैं)। मुझे लगता है कि एक पुस्तकालय का उपयोग करना तब तक आसान हो सकता है जब तक कि आप स्वयं इन योनियों के लिए तैयार न हों। मैं वास्तव में इसका जवाब चाहता हूं, लेकिन IE इस पर एक शिकंजा :-(

— Akrikos

हम्म ... वास्तव में यह क्रॉस ब्राउज़र तरीके से कुंजी को लागू करने के लिए बहुत बुरा नहीं लगता है। नियमित अल्फ़ान्यूमेरिक कुंजियाँ केवल उनका मान लौटाती हैं और नियंत्रण कुंजी (एस्केप, एंटर, टैब इत्यादि) के लिए IE11 / Edge को छोड़कर अधिकांश ब्राउज़रों में समान रूप से कार्यान्वित दिखाई देती हैं जो कि पुराने संस्करण को कार्यान्वित करती हैं, इसलिए कम से कम प्रत्येक के लिए केवल दो संभावित मान हैं चाभी।

— अक्रिकोस

मैं keyइसके बजाय का उपयोग करने की सलाह दूंगा code। उदाहरण के लिए, यदि आपके पास मीडिया नियंत्रण कुंजी के साथ एक कीबोर्ड है, तो प्ले / पॉज़ आउटपुट को दबाएं "MediaPlayPause" के लिए keyऔर "" के लिए code।

— थोदोन

Answer 4

इसे देखें: https://developer.mozilla.org/en-US/docs/Web/API/event.keyTode

एक कीप इवेंट में, कुंजी दबाए गए यूनिकोड मान को कीकोड या चारकोड प्रॉपर्टी दोनों में स्टोर किया जाता है, दोनों कभी नहीं। यदि कुंजी दबाया गया है तो एक वर्ण बनाता है (उदाहरण के लिए 'a'), वर्ण कोड के संबंध में चारकोड उस वर्ण के कोड पर सेट होता है। (यानी चारकोड में यह ध्यान रखा जाता है कि शिफ्ट की को नीचे रखा जाए)। अन्यथा, दबाए गए कुंजी का कोड कीकोड में संग्रहीत होता है। कीकोड को हमेशा की-डाउन और की-अप इवेंट्स में सेट किया जाता है। इन मामलों में, चार्जकोड कभी सेट नहीं किया जाता है। यह कुंजी कोड या चारकोड में संग्रहीत किया गया था या नहीं, इसकी परवाह किए बिना कुंजी का कोड प्राप्त करने के लिए, किस संपत्ति को क्वेरी करें। IME के ​​माध्यम से दर्ज वर्ण कीकोड या चारकोड के माध्यम से पंजीकृत नहीं होते हैं।

Answer 5

मैं सुझा दूंगा event.key वर्तमान में । MDN डॉक्स: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodeऔर event.whichदोनों ने अपने MDN पृष्ठों के शीर्ष पर अनिर्दिष्ट चेतावनी दी है:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / वेब / एपीआई / KeyboardEvent / जो

अल्फ़ान्यूमेरिक कुंजियों के लिए, event.key सभी ब्राउज़रों में समान रूप से लागू किया गया प्रतीत होता है। नियंत्रण कुंजी (टैब, एंटर, एस्केप, आदि) के लिए, event.keyChrome / FF / Safari / Opera में समान मान है , लेकिन IE10 / 11 / Edge (IE में जाहिरा तौर पर भिन्न मान का उपयोग पुराने संस्करण के चश्मे के रूप में किया गया है लेकिन एक दूसरे से मेल खाते हैं) जनवरी 14 2018 तक)।

अल्फ़ान्यूमेरिक कुंजियों के लिए एक चेक कुछ इस तरह दिखाई देगा:

event.key === 'a'

नियंत्रण वर्णों के लिए आपको कुछ करने की आवश्यकता होगी:

event.key === 'Esc' || event.key === 'Escape'

मैंने कई ब्राउज़रों पर परीक्षण करने के लिए यहां उदाहरण का उपयोग किया (मुझे IE10 के साथ काम करने के लिए कोडपेन में खोलना और इसे संपादित करना था): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent कोड

event.code एक अलग उत्तर में एक संभावना के रूप में उल्लेख किया गया है, लेकिन IE10 / 11 / एज इसे लागू नहीं करते हैं, इसलिए यदि आप IE समर्थन चाहते हैं तो यह बाहर है।

Answer 6

कीबोर्ड इनपुट और प्रमुख संयोजनों को कैप्चर करने के लिए एक मजबूत जावास्क्रिप्ट लाइब्रेरी में प्रवेश किया। इसकी कोई निर्भरता नहीं है।

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

हॉटकी निम्नलिखित संशोधक को समझता है: ⇧, shift, option, ⌥, alt, ctrl, control, command, और⌘ ।

निम्नलिखित विशेष कुंजी शॉर्टकट के लिए इस्तेमाल किया जा सकता है: backspace, tab, clear, enter, return, esc,escape , space, up, down, left, right, home, end, pageup, pagedown, del, deleteऔर f1के माध्यम से f19।

Comments

यह Array.prototype.indexOf को चमकाता है, इसलिए यदि आप इसे किसी अन्य लाइब्रेरी में उपयोग कर रहे हैं, तो यह उपयुक्त नहीं हो सकता क्योंकि यह वैश्विक स्कोप को संशोधित करता है। यह भी पदावनत का उपयोग करता प्रतीत होता है event.keyCode।

— एरिकोस

इस लाइब्रेरी ने मेरे Vaio लैपटॉप पर Fn का पता नहीं लगाया।

— थूडन

Answer 7

फ़ायरफ़ॉक्स में, कीकोड संपत्ति onkeypress घटना पर काम नहीं करती है (केवल 0 लौटेगी)। एक क्रॉस-ब्राउज़र समाधान के लिए, किस संपत्ति का उपयोग कीकोड के साथ करें, जैसे:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support