KeyboardEvent.keyCode पदावनत। अभ्यास में इसका क्या मतलब है?

Question 1

एमडीएन के अनुसार, हमें निश्चित रूप से संपत्ति का उपयोग नहीं करना चाहिए .keyCode। यह पदावनत है:

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

W3 स्कूल में, यह तथ्य नीचे खेला जाता है और केवल साइड नोट कहा जाता है जो .keyCodeकेवल संगतता के लिए प्रदान किया जाता है और यह कि DOM इवेंट्स स्पेसिफिकेशन का नवीनतम संस्करण .keyइसके बजाय संपत्ति का उपयोग करने की सलाह देता है ।

समस्या यह है कि .keyब्राउज़र द्वारा समर्थित नहीं है, इसलिए हमें क्या उपयोग करना चाहिए? क्या मुझे कुछ याद आ रहा है?

Question 2

आपके पास इसे संभालने के तीन तरीके हैं, जैसा कि आपके द्वारा साझा किए गए लिंक पर लिखा गया है।

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

यदि आप क्रॉस ब्राउज़र समर्थन चाहते हैं तो आपको उनका चिंतन करना चाहिए।

यह आसान हो सकता है यदि आप कुछ इस तरह से लागू करते हैं।

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Question 3

के सभी कि इसके अलावा कीकोड , जो , charCode और keyIdentifier : पदावनत कर रहे हैं
charCodeऔर keyIdentifierगैर मानक विशेषताएं हैं। एफएफ पर सामान्य पात्रों के साथ कीपर इवेंट
keyIdentifierमें क्रोम 54 और ओपेरा 41.0
keyCodeरिटर्न 0 के रूप में हटा दिया जाता है ।

मुख्य संपत्ति :

 readonly attribute DOMString key

दबाए गए कुंजी के अनुरूप एक प्रमुख विशेषता मान प्राप्त करता है

इस लेखन के समय तक, keyसंपत्ति को सभी प्रमुख ब्राउज़रों द्वारा समर्थित किया गया है: फ़ायरफ़ॉक्स 52, क्रोम 55, सफारी 10.1, ओपेरा 46। इंटरनेट एक्सप्लोरर 11 को छोड़कर: जिसमें अल्टाग्राफ के साथ गैर-मानक प्रमुख पहचानकर्ता और गलत व्यवहार है। अधिक जानकारी
यदि वह महत्वपूर्ण और / या पिछड़ी संगतता है, तो आप निम्न कोड में फीचर डिटेक्शन का उपयोग कर सकते हैं:

ध्यान दें कि keyमूल्य उस में keyCodeया whichगुणों से अलग है: इसमें कुंजी का नाम होता है न कि उसका कोड। यदि आपके प्रोग्राम को पात्रों के कोड की आवश्यकता है तो आप इसका उपयोग कर सकते हैं charCodeAt()। एकल मुद्रण योग्य वर्णों के लिए charCodeAt(), यदि आप उन कुंजियों के साथ काम कर रहे हैं, जिनके मूल्य में कई वर्ण हैं जैसे ArrowUp संभावनाएँ हैं: आप विशेष कुंजियों के लिए परीक्षण कर रहे हैं और तदनुसार कार्य कर रहे हैं। तो कुंजी 'मानों की तालिका को लागू करने की कोशिश और उनके इसी कोड charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... और इतने पर, कृपया पर एक नज़र डालें कुंजी मान और उनके इसी कोड

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */

हो सकता है कि आप आगे की संगतता पर विचार करना चाहते हों अर्थात जब वे उपलब्ध हों, तब विरासत गुणों का उपयोग करें, और केवल तभी जब नए लोगों पर स्विच किया जाए:

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

यह भी देखें: KeyboardEvent.codeसंपत्ति डॉक्स और इस उत्तर में कुछ और विवरण ।

Question 4

TLDR: मेरा सुझाव है कि आपको विरासत के बजाय नए और गुणों का उपयोग करना चाहिए । IE और Edge के पास इन गुणों के लिए समर्थन है, लेकिन अभी तक नए प्रमुख नामों का समर्थन नहीं करते हैं। उनके लिए, एक छोटी पॉलीफ़िल होती है जो उन्हें मानक कुंजी / कोड नामों का आउटपुट देती है:event.keyevent.code

https://github.com/shvaikalesh/shim-keyboard-event-key

मुझे यह सवाल ओपी के रूप में उसी एमडीएन चेतावनी के कारण की खोज में आया था। कुछ और खोज करने के बाद, यह मुद्दा keyCodeऔर अधिक स्पष्ट हो जाता है:

उपयोग करने keyCodeमें समस्या यह है कि गैर-अंग्रेजी कीबोर्ड विभिन्न आउटपुट और यहां तक कि विभिन्न लेआउट वाले कीबोर्ड भी असंगत परिणाम उत्पन्न कर सकते हैं। साथ ही, का मामला था

यदि आप W3C युक्ति पढ़ते हैं: https://www.w3.org/TR/uievents/#interface-keyboardevent

व्यवहार में, कीकोड और चारकोड विभिन्न प्लेटफार्मों पर असंगत हैं और यहां तक कि अलग-अलग ऑपरेटिंग सिस्टम पर एक ही कार्यान्वयन या विभिन्न स्थानीयकरणों का उपयोग कर रहे हैं।

यह वर्णन करने में कुछ गहराई में चला गया कि क्या गलत था keyCode: https://www.w3.org/TR/uievents/#legacy-key-atteses

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

इसलिए, इस कारण को स्थापित करने के बाद कि विरासत कीकोड को बदल दिया गया था, आइए देखें कि आज आपको क्या करना है:

सभी आधुनिक ब्राउज़र नए गुणों ( keyऔर code) का समर्थन करते हैं ।
IE और एज युक्ति के पुराने संस्करण का समर्थन करते हैं, जिसमें कुछ कुंजी के लिए अलग-अलग नाम हैं। आप इसके लिए एक शिम का उपयोग कर सकते हैं: https://github.com/shvaikalesh/shim-keyboard-event-key (या अपना स्वयं का रोल करें - यह किसी भी तरह से छोटा है)
नवीनतम रिलीज़ में एज ने इस बग को ठीक कर दिया है (संभवतः अप्रैल 2018 में रिलीज़ किया जाएगा) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
आपके द्वारा उपयोग की जा सकने वाली ईवेंट कुंजी की सूची देखें: https://www.w3.org/TR/uievents-key/

Question 5

MDN पहले ही एक समाधान प्रदान कर चुका है:

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

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Question 6

उदाहरण के लिए यदि आप यह पता लगाना चाहते हैं कि "Enter" -की पर क्लिक किया गया या नहीं:

के बजाय

event.keyCode === 13

इसे लाइक करें

event.key === 'Enter'