কীবোর্ডএভেন্ট.কি.কোড অবমূল্যায়ন করা হয়েছে। অনুশীলনে এর অর্থ কী?

Question 1

এমডিএন অনুসারে, আমাদের অবশ্যই সম্পত্তিটি ব্যবহার করা উচিত নয়.keyCode । এটি অবচয় করা হয়েছে:

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

ডাব্লু 3 স্কুলে, এই বাস্তবতাটি নিখুঁতভাবে চালিত হয়েছে এবং কেবলমাত্র একটি পার্শ্ব নোট রয়েছে যা কেবলমাত্র .keyCodeসামঞ্জস্যের জন্য সরবরাহ করা হয়েছে এবং DOM ইভেন্টস স্পেসিফিকেশনের সর্বশেষ সংস্করণটি .keyপরিবর্তে সম্পত্তিটি ব্যবহার করার পরামর্শ দেয় ।

সমস্যাটি .keyব্রাউজার দ্বারা সমর্থিত নয়, তাই আমাদের কী ব্যবহার করা উচিত? আমি কি অনুপস্থিত কিছু আছে?

Question 2

এটি ভাগ করে নেওয়ার জন্য আপনার কাছে তিনটি উপায় রয়েছে, যেমনটি আপনি ভাগ করেছেন সেই লিঙ্কটিতে এটি লেখা আছে।

if (event.key !== undefined) {

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

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

}

আপনার যদি তাদের ক্রস ব্রাউজার সমর্থন চান তবে এটাই সঠিক উপায় contemp

আপনি যদি এরকম কিছু প্রয়োগ করেন তবে এটি আরও সহজ হতে পারে।

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এটি অ-মানক বৈশিষ্ট্য রয়েছে।
keyIdentifierক্রোম 54 হিসাবে অপসারণ করা হয়েছে এবং
keyCodeএফএফ-এ সাধারণ অক্ষর সহ কীপ্রেস ইভেন্টে অপেরা 41.0 0 প্রদান করে।

মূল সম্পত্তি :

 readonly attribute DOMString key

টিপে থাকা কীটির সাথে সম্পর্কিত একটি কী বৈশিষ্ট্যযুক্ত মান ধরে value

এই লেখার সময় হিসাবে, keyসম্পত্তিটি সমস্ত প্রধান ব্রাউজারগুলি দ্বারা সমর্থিত: ফায়ারফক্স ৫২, ক্রোম 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

টিএলডিআর: আমি আপনাকে পরামর্শ দিচ্ছি যে উত্তরাধিকারীদের পরিবর্তে আপনার নতুন এবং বৈশিষ্ট্যগুলি ব্যবহার করা উচিত । এই বৈশিষ্ট্যগুলির জন্য আইই এবং এজের সমর্থন রয়েছে, তবে এখনও নতুন মূল নামগুলি সমর্থন করবেন না। তাদের জন্য একটি ছোট পলিফিল রয়েছে যা তাদের মানক কী / কোডের নামগুলি আউটপুট দেয়:event.keyevent.code

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

ওপি হিসাবে একই এমডিএন সতর্কতার কারণ অনুসন্ধান করে আমি এই প্রশ্নে এসেছি। আরও কিছু অনুসন্ধান করার পরে, সমস্যাটি keyCodeআরও স্পষ্ট হয়ে ওঠে:

ব্যবহারের keyCodeক্ষেত্রে সমস্যাটি হ'ল অ-ইংরাজী কীবোর্ডগুলি বিভিন্ন আউটপুট তৈরি করতে পারে এবং এমনকি বিভিন্ন লেআউট সহ কী-বোর্ডগুলিও অসঙ্গতিপূর্ণ ফলাফল আনতে পারে। এছাড়াও, ঘটনা ছিল

আপনি যদি ডাব্লু 3 সি অনুচ্ছেদটি পড়েন: https://www.w3.org/TR/uievents/#interface-keyboardevent

অনুশীলনে, কী কোড এবং চারকোড প্ল্যাটফর্ম জুড়ে এবং এমনকি বিভিন্ন অপারেটিং সিস্টেমগুলিতে বা বিভিন্ন স্থানীয়করণ ব্যবহার করে একই বাস্তবায়ন অসঙ্গতিপূর্ণ ।

এটি কী গভীর ছিল তা বর্ণনা করতে কিছু গভীরতায় যায় keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

এই বৈশিষ্ট্যগুলি কখনও আনুষ্ঠানিকভাবে নির্দিষ্ট করা হয়নি এবং বর্তমান ব্রাউজারের প্রয়োগগুলি উল্লেখযোগ্য উপায়ে পরিবর্তিত হয়। স্ক্রিপ্ট লাইব্রেরি সহ প্রচুর পরিমাণে উত্তরাধিকার বিষয়বস্তু, যা ব্যবহারকারী এজেন্ট সনাক্ত করার উপর নির্ভর করে এবং তদনুযায়ী কাজ করার অর্থ এই লিগ্যাসির বৈশিষ্ট্য এবং ইভেন্টগুলিকে আনুষ্ঠানিক করার যে কোনও প্রয়াসের ফলে এটি যথাযথভাবে ঠিক করা বা সক্ষম করার মতো সামগ্রী ভাঙার ঝুঁকিপূর্ণ। অধিকন্তু, এই বৈশিষ্ট্যগুলি আন্তর্জাতিক ব্যবহারের জন্য উপযুক্ত নয় এবং এগুলি অ্যাক্সেসযোগ্যতার উদ্বেগগুলির সমাধান করে না।

সুতরাং, উত্তরাধিকার কী কোডটি প্রতিস্থাপনের কারণটি স্থির করার পরে, আজ আপনার কী করা দরকার তা দেখুন:

সমস্ত আধুনিক ব্রাউজারগুলি নতুন বৈশিষ্ট্যগুলি ( keyএবং code) সমর্থন করে ।
আইই এবং এজ স্পেকের একটি পুরানো সংস্করণ সমর্থন করে, যার কয়েকটি কীগুলির বিভিন্ন নাম রয়েছে। আপনি এটির জন্য শিম ব্যবহার করতে পারেন: 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

এমডিএন ইতিমধ্যে একটি সমাধান সরবরাহ করেছে:

https://developer.mozilla.org/en-US/docs/Web/API/KeboardEvent/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

উদাহরণস্বরূপ যদি আপনি সনাক্ত করতে চান "এন্টার" -কিকে ক্লিক করা হয়েছিল কি না:

পরিবর্তে

event.keyCode === 13

এটি পছন্দ করুন

event.key === 'Enter'