একটি কী চাপুন এবং ফলস্বরূপ 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 চায়, কারণ ব্যবহারকারী A-এর পাশের কী-এর বদলে S অক্ষরের পরিপ্রেক্ষিতে ভাবে।
মডিফায়ার ফ্ল্যাগগুলো আলাদা বুলিয়ান: ctrlKey, shiftKey, altKey ও metaKey। key থেকে অনুমান না করে এগুলো স্পষ্টভাবে পরীক্ষা করুন, আর মনে রাখবেন প্রাথমিক শর্টকাট মডিফায়ার macOS-এ Command এবং অন্যত্র Control। একটি সাধারণ প্যাটার্ন হলো event.metaKey || event.ctrlKey গ্রহণ করা যাতে একটি হ্যান্ডলার উভয় প্ল্যাটফর্ম কভার করে।
event.location সদৃশ কীগুলোকে পৃথক করে। স্ট্যান্ডার্ড কী-র জন্য এটি 0, বাম Shift-এর মতো জোড়ার বাম-পার্শ্বের সদস্যের জন্য 1, ডান-পার্শ্বেরটির জন্য 2, আর নিউমেরিক কিপ্যাডের কী-র জন্য 3।
ব্যবহারিক সমস্যা
প্রতিটি কী প্রত্যাশিত ইভেন্ট উৎপাদন করে না। ব্রাউজার কিছু কম্বিনেশন নিজের জন্য সংরক্ষণ করে - Ctrl+W, Ctrl+T ও Command+Q সাধারণত পেজ দেখার আগেই ট্যাব বন্ধ বা অ্যাপ ছেড়ে দেয়, আর preventDefault সেগুলো ফিরিয়ে আনতে পারে না। আপনার হ্যান্ডলারে পৌঁছাবে ধরে না নিয়ে যেকোনো শর্টকাট আসল ব্রাউজার উইন্ডোতে পরীক্ষা করুন।
একটি কী চেপে ধরে রাখলে প্রথমটির পরে event.repeat true সেটসহ রিপিট ইভেন্টের ধারা উৎপন্ন হয়। শর্টকাট একবারই চলার কথা হলে রিপিট উপেক্ষা করুন, আর আচরণ অব্যাহত থাকলে যেমন স্ক্রলিং বা কার্সর সরানো, সেগুলোকে সম্মান করুন।
অবশেষে, keydown ও keyup কী বর্ণনা করে, অন্যদিকে keypress অক্ষর বর্ণনা করত এবং মান থেকে সরানো হয়েছে। টেক্সট ইনপুটের জন্য, input ইভেন্ট শোনা বা beforeinput পড়া ভালো, যা কম্পোজিশন, অটোকমপ্লিট ও মোবাইল কীবোর্ড যেকোনো কী-লেভেল ইভেন্টের চেয়ে অনেক বেশি নির্ভরযোগ্যভাবে সামলায়।
FAQ
কীবোর্ড শর্টকাটের জন্য key নাকি code ব্যবহার করা উচিত?
শারীরিক অবস্থান গুরুত্বপূর্ণ হলে `code` ব্যবহার করুন, যেমন গেমে WASD চলন। অর্থ গুরুত্বপূর্ণ হলে `key` ব্যবহার করুন, যেমন সেভের জন্য Ctrl+S, যাতে শর্টকাট ব্যবহারকারীর নিজস্ব লেআউট অনুসরণ করে।
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` এগুলোর সবকিছু সঠিকভাবে রিপোর্ট করে।