.কি কোড কোড বনাম। যা


228

আমি ভেবেছিলাম স্ট্যাক ওভারফ্লোতে কোথাও এর উত্তর দেওয়া হবে তবে আমি এটি খুঁজে পাচ্ছি না।

আমি যদি কোনও কীপ্রেস ইভেন্টের জন্য শুনছি, আমি কী ব্যবহার করব .keyCodeবা .whichএন্টার কী টিপেছে কিনা তা নির্ধারণ করা উচিত ?

আমি সর্বদা নিম্নলিখিতগুলির মতো কিছু করেছি:

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

তবে আমি উদাহরণগুলি দেখছি যা .whichপরিবর্তে ব্যবহার করে .keyCode। পার্থক্য কি? একজনের চেয়ে অন্য ক্রস-ব্রাউজারটি কি বন্ধুত্বপূর্ণ?


1
এগুলি উভয়ই এখন অবহিত হিসাবে বিবেচিত হয়, এফওয়াইআই। developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
CodeFinity

উত্তর:


209

দ্রষ্টব্য: নীচের উত্তরটি ২০১০ সালে লেখা হয়েছিল Here এখানে বহু বছর পরে উভয়ই keyCodeএবং (যৌক্তিক কীটির whichপক্ষে key) এবং code( কীটির শারীরিক স্থান নির্ধারণের জন্য ) পক্ষে অবমূল্যায়ন করা হয় । তবে নোট করুন যে আইই সমর্থন করে না code, এবং এর সমর্থনটি keyঅনুমানের একটি পুরানো সংস্করণের উপর ভিত্তি করে তাই একেবারেই সঠিক নয়। আমি যখন এটি লিখছি, এজ এজএইচটিএমএল এবং চক্রের উপর ভিত্তি করে বর্তমান এজ কোনও সমর্থন করে না code, তবে মাইক্রোসফ্ট এজ ব্লকের জন্য ব্লিঙ্ক - এবং ভি 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শেষে ব্যবহার জাভাস্ক্রিপ্ট এর অদ্ভুতভাবে সর্বশক্তিমান ||অপারেটর )।


2
ধন্যবাদ টিজে আমি এর জন্য একটি রেফারেন্সটি কোথায় খুঁজে পাব? আমি আপনাকে বিশ্বাস করি না এমন নয়, আমি কেবল কৌতুহলী! ... আমি আপনাকে কেবল এটি জুড়ে দেখতে পেয়েছি, ধন্যবাদ। সুতরাং, এমনকি যারা jquery ব্যবহার করেন না তাদের জন্যও। আরও ভাল পছন্দ কোনটি?
স্কট

7
@ স্কট: 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?) তবে আমি যে ধরণের জিনিস করি তার যত্ন নেওয়ার সম্ভাবনা কম।
টিজে ক্রাউডার

2
@ স্কটই, এখানে একটি প্রাথমিক রেফারেন্স: quirksmode.org/js/keys.html (এটি অন্তর্ভুক্ত নয় which, যা আমি মনে করি কেবল jQuery দ্বারা সরবরাহ করা হয়েছে তবে আমি 100% নিশ্চিত নই, তবে এটি আপনাকে দেখতে শুরু করা উচিত) ব্রাউজারগুলিতে পার্থক্য)
মটি

1
@ ফডজি: আইই ব্যতীত সমস্ত ব্রাউজার দ্বারা whichসরবরাহ করা হয়েছে keypress। এবং quirksmode এখানে অনুমোদনযোগ্য নয়। রেফারেন্স হিসাবে, @ টিজে ক্রাউডার পোস্ট করা লিঙ্কটি আরও ভাল: unixpapa.com/js/key.html
টিম ডাউন

5
@ টিজে ক্রাউডার: হ্যাঁ, অনুষ্ঠানের whichসম্পত্তি শূন্য হতে পারে এবং এটি বেশিরভাগ অ্যাপ্লিকেশনগুলিতে বড় পার্থক্য আনতে পারে। উদাহরণস্বরূপ, ফায়ারফক্সে মুদ্রণযোগ্য কীগুলির whichশূন্যের সম্পত্তি এবং সমান keyCodeসম্পত্তি রয়েছে keydown। হোম keyCodeপিসিতে ফায়ারফক্সে আমার পিসিতে 36 টির একটি রয়েছে যা "character" এর জন্য অক্ষর কোড, যা হোম কী টিপে থাকা ব্যবহারকারী এবং ব্যবহারকারীর দ্বারা $ চরিত্রটি টাইপ করে ব্যবহারকারীদের মধ্যে পার্থক্য করা অসম্ভব করে তোলে event.which || event.keyCode
টিম ডাউন

32

jQuery ব্রাউজার দ্বারা সমর্থিত , বা এর event.whichউপর নির্ভর করে স্বাভাবিক করে :event.whichevent.keyCodeevent.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 ) ));
}

2
var key = event.which || event.charCode || event.keyCode
অ্যান ভ্যান রসম

@ অ্যান-ভ্যান-রসম, event.wich == null && ...কেবল নাল বা অপরিজ্ঞাত জন্য পরীক্ষা। মিথ্যাচারেরevent.wich || ... জন্য আপনার পরীক্ষা ( অপরিজ্ঞাত , নাল, মিথ্যা, 0, '' ইত্যাদি)
aMarCruz

উদ্দেশ্য @AMarCruz ফালসি যেমন bugs.webkit.org/show_bug.cgi?id=16735 ওয়েবকিট প্রতিবেদন 0। এবং আমি চেক ""বা []ব্যথা মনে করি না ।
অ্যান ভ্যান রসম

20

আপনি যদি ভ্যানিলা জাভাস্ক্রিপ্টে অবস্থান করছেন, দয়া করে নোট করুন কোড কোড এখন অবচয় করা হয়েছে এবং বাদ দেওয়া হবে:

এই বৈশিষ্ট্যটি ওয়েব মান থেকে সরানো হয়েছে। যদিও কিছু ব্রাউজার এখনও এটি সমর্থন করতে পারে তবে এটি বাদ দেওয়ার প্রক্রিয়াধীন। এটি ব্যবহার করা এড়িয়ে চলুন এবং সম্ভব হলে বিদ্যমান কোড আপডেট করুন; আপনার সিদ্ধান্তটি গাইড করতে এই পৃষ্ঠার নীচে সামঞ্জস্যতা সারণীটি দেখুন। সচেতন হন যে এই বৈশিষ্ট্যটি যে কোনও সময়ে কাজ করা বন্ধ করতে পারে

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

পরিবর্তে আপনি যে আচরণটি চান তার উপর নির্ভর করে : .key বা। কোড কোড ব্যবহার করুন: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / ডক্স / ওয়েব / এপিআই / KeyboardEvent / কী

উভয়ই আধুনিক ব্রাউজারগুলিতে প্রয়োগ করা হয়।


.code কীবোর্ডের কীটির শারীরিক অবস্থানের সাথে সম্পর্কিত, যেখানে .key অবস্থান নির্বিশেষে চাবির দ্বারা উত্পন্ন চরিত্রের সাথে সম্পর্কিত।
ক্রিস্টোফার

1
'কোড' এবং 'কী' দুটিরই আধুনিক ব্রাউজারগুলিতে কুইর্ক রয়েছে। বিভিন্ন ব্রাউজারে MDN বিকাশকারী.মোজিলা.অর্গ /en-US/docs/Web/API/KeyboardEvent/code- এ "ব্যবহার করে দেখুন" উদাহরণটি দেখায় যে আইই 11 / আইই এজ 'কোড' এবং 'কী' প্রয়োগ করে না ক্রোম / এফএফ / সাফারি প্রয়োগগুলি বাস্তবায়নের সাথে মেলে না (পার্থক্যগুলি মূলত এস্কেপ এবং এন্টারের মতো নিয়ন্ত্রণের অক্ষরে উপস্থিত থাকে)। আমি মনে করি আপনি যদি নিজেরাই এই ভিজাগুলির জন্য অ্যাকাউন্ট না করতে চান তবে লাইব্রেরি ব্যবহার করা সবচেয়ে সহজ হতে পারে। আমি সত্যিই
এটির

হুম ... ক্রস ব্রাউজার উপায়ে কী প্রয়োগ করা খুব খারাপ লাগে না। নিয়মিত বর্ণমালা কীগুলি কেবল তাদের মানটি ফেরত দেয় এবং নিয়ন্ত্রণ কীগুলির জন্য (পালানো, প্রবেশ করানো, ট্যাব ইত্যাদি) আইআই 11 / এজ ব্যতীত বেশিরভাগ ব্রাউজারগুলিতে একইভাবে প্রয়োগ করা হয় যা স্পেকের একটি পুরানো সংস্করণ প্রয়োগ করে, তাই কমপক্ষে প্রতিটি ক্ষেত্রে কেবল দুটি সম্ভাব্য মান রয়েছে চাবি.
আকরিকস

আমি keyপরিবর্তে ব্যবহার পরামর্শ code। উদাহরণস্বরূপ, আপনার যদি মিডিয়া কন্ট্রোল কীগুলির সাথে কীবোর্ড থাকে তবে প্লে / বিরতি আউটপুটগুলি "মিডিয়াপ্লেপজ" keyএবং এর জন্য "" চাপুন code
thdoan

6

এটি দেখুন: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

একটি কী-ইপ্রেস ইভেন্টে, কী চাপানো কি ইউনিকোড মান কী কোড বা চারকোড বৈশিষ্ট্যে সংরক্ষণ করা হয়, উভয়ই নয়। কী চাপলে কী অক্ষর উত্পন্ন করে (যেমন 'এ'), অক্ষরের ক্ষেত্রে শ্রদ্ধার সাথে চারকোড সেই অক্ষরের কোডে সেট করা থাকে। (অর্থাত্ চারকড শিফট কীটি চেপে ধরে আছে কিনা তা বিবেচনায় নেয়)। অন্যথায়, চাপা কীটির কোড কী কোডে সঞ্চিত থাকে। কী কোড সবসময় কীডাউন এবং কীআপ ইভেন্টগুলিতে সেট থাকে। এই ক্ষেত্রে, চারকোড কখনও সেট করা হয় না। কী কোড বা চারকোডে সঞ্চিত ছিল তা বিবেচনা না করে কী কোডটি পেতে, কোন সম্পত্তিটি জিজ্ঞাসা করুন। কোনও আইএমই এর মাধ্যমে প্রবেশ করা অক্ষরগুলি কী কোড বা চারকোডের মাধ্যমে নিবন্ধভুক্ত হয় না।


6

আমি 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 / ডক্স / ওয়েব / এপিআই / KeyboardEvent / যা

বর্ণমালা সংক্রান্ত কীগুলির জন্য, event.keyসমস্ত ব্রাউজারগুলিতে অভিন্নভাবে প্রয়োগ করা হবে বলে মনে হয়। কন্ট্রোল কীগুলির জন্য (ট্যাব, প্রবেশ করুন, পালানো, ইত্যাদি) event.keyক্রোম / এফএফ / সাফারি / অপেরা জুড়ে একই মান রয়েছে তবে আইই 10/11 / এজের আলাদা মান রয়েছে (আইইগুলি স্পষ্টতই বর্ণনার একটি পুরানো সংস্করণ ব্যবহার করে তবে একে অপরের সাথে মেলে জানুয়ারী 14 2018)।

বর্ণানুক্রমিক কীগুলির জন্য একটি চেক এর মতো দেখতে কিছু হবে:

event.key === 'a'

নিয়ন্ত্রণের অক্ষরগুলির জন্য আপনাকে এমন কিছু করতে হবে:

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

আমি একাধিক ব্রাউজারে পরীক্ষা করার জন্য উদাহরণটি এখানে ব্যবহার করেছি (আইই 10 এর সাথে কাজ করার জন্য আমাকে কোডেপেন খুলতে হয়েছিল এবং এটি সম্পাদনা করতে হয়েছিল): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ কোড

event.code সম্ভাবনা হিসাবে আলাদা উত্তরে উল্লেখ করা হয়েছে, তবে আইই 10/11 / এজ এটিকে বাস্তবায়ন করে না, তাই আপনি যদি আইই সমর্থন চান তবে এটি আউট।


2

কীবোর্ড ইনপুট এবং কী সংমিশ্রণগুলি ক্যাপচারের জন্য একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি প্রবেশ করেছে। এর কোনও নির্ভরতা নেই।

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


এটি শিম অ্যারে.প্রোটোটাইপ.ইনডেক্স তবেই না, তাই আপনি যদি এটি অন্য লাইব্রেরিতে ব্যবহার করেন তবে এটি বিশ্বব্যাপী সুযোগ পরিবর্তন করার কারণে এটি উপযুক্ত নাও হতে পারে। এটি অবচয়হীন ব্যবহার করা হবে বলে মনে হয় event.keyCode
আকরিকস

এই লাইব্রেরিটি আমার ভাইও ল্যাপটপে Fn সনাক্ত করতে পারেনি।
thdoan

0

ফায়ারফক্সে, কী কোডের সম্পত্তিটি অ্যানকিপ্রেস ইভেন্টে কাজ করে না (কেবলমাত্র 0 ফিরে আসবে)। ক্রস-ব্রাউজার সমাধানের জন্য, কী কোডের সাথে একত্রে সম্পত্তিটি ব্যবহার করুন, যেমন:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.