কীভাবে জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করবেন

Kibhabe Jabhaskripte Tyaba Ki Sanakta Karabena



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

এই লিখন আপনাকে জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করতে গাইড করবে।

কীভাবে জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করবেন?

জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করতে, নিম্নলিখিত কৌশলগুলি প্রয়োগ করুন:







  • ' প্রশ্ন নির্বাচক() 'পদ্ধতি
  • ' getElementbyId() 'পদ্ধতি

উল্লিখিত পন্থাগুলো একে একে প্রদর্শিত হবে!



পদ্ধতি 1: document.querySelector() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করুন

দ্য ' document.querySelector() ” পদ্ধতিটি একটি CSS নির্বাচকের সাথে মিলে যাওয়া প্রথম উপাদানটিকে অ্যাক্সেস করে এবং তারপর addEventListener() পদ্ধতিটি অ্যাক্সেস করা উপাদানটিতে একটি ইভেন্ট হ্যান্ডলার যোগ করে। এই পদ্ধতিগুলি ইনপুট টাইপ অ্যাক্সেস করার জন্য প্রয়োগ করা যেতে পারে এবং ট্যাব কী টিপছে কিনা তা সনাক্ত করার সময় এটির মান প্রবেশ করানো হয়।



বাক্য গঠন





উপাদান AddEventListener ( ঘটনা , ফাংশন , ক্যাপচার ব্যবহার করুন )

প্রদত্ত সিনট্যাক্সে, ' ঘটনা ইভেন্টের নাম বোঝায়, ফাংশন 'ইভেন্টটি ঘটলে চালানোর জন্য নির্দিষ্ট ফাংশন, এবং ' ক্যাপচার ব্যবহার করুন ” হল ঐচ্ছিক যুক্তি।

নথি querySelector ( সিএসএস নির্বাচক )

উপরের সিনট্যাক্সে, ' সিএসএস নির্বাচক ” এক বা একাধিক CSS নির্বাচকদের উল্লেখ করুন যা document.querySelector() পদ্ধতিতে নির্দিষ্ট করা যেতে পারে।



বর্ণিত ধারণাটি আরও ভালভাবে বোঝার জন্য নিম্নলিখিত উদাহরণটি দেখুন।

উদাহরণ
প্রথমত, ইনপুট টাইপ উল্লেখ করুন “ পাঠ্য ' একটি প্রাথমিক স্থানধারক মান এবং একটি শিরোনাম সহ ' ট্যাগ:

< ইনপুট প্রকার = 'পাঠ্য' স্থানধারক = 'লেখা অন্তর্ভুক্ত করুন' >
< h2 > ফলাফল < / h2 >

এরপরে, প্রয়োগ করুন ' document.querySelector() 'নির্দিষ্ট ইনপুট এবং শিরোনাম অ্যাক্সেস করার জন্য যথাক্রমে পদ্ধতি এবং 'নামক ভেরিয়েবলগুলিতে সংরক্ষণ করুন ইনপুট ' এবং ' ফলাফল ”:

ইনপুট দিন = নথি querySelector ( 'ইনপুট' ) ;
ফলাফল দিন = নথি querySelector ( 'h2' ) ;

এখন, যোগ করুন ' কীডাউন addEventListener() পদ্ধতি ব্যবহার করে ইনপুট ক্ষেত্রের সাথে ইভেন্ট। এই ইভেন্টটি ব্যবহারকারীকে অবহিত করবে যখনই ' ট্যাব ইনপুট ফিল্ডে নিচের শর্তটি প্রয়োগ করে কী চাপানো হয় অভ্যন্তরীণ পাঠ্য 'সম্পত্তি:

ইনপুট. AddEventListener ( 'কীডাউন' , ( এবং ) => {
যদি ( এবং. চাবি === 'ট্যাব' ) {
ফলাফল. অভ্যন্তরীণ পাঠ্য = 'ট্যাব কী চাপা' ;
} অন্য {
ফলাফল. অভ্যন্তরীণ পাঠ্য = 'ট্যাব কী টিপানো হয়নি' ;
}

এই ক্ষেত্রে, যখন ব্যবহারকারী ট্যাব কী টিপবে, যোগ করা সম্পাদিত ক্রিয়া সম্পর্কে অবহিত করবে:

পদ্ধতি 2: document.getElementbyId() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করুন

দ্য ' document.getElementById() ” পদ্ধতিটি আইডির উপর ভিত্তি করে একটি নির্দিষ্ট HTML উপাদান অ্যাক্সেস করতে ব্যবহার করা যেতে পারে। এই পদ্ধতিটি ইনপুট ক্ষেত্র পেতে এবং ব্যবহারকারীকে সতর্ক করার জন্য একটি ইভেন্ট যোগ করার জন্য প্রয়োগ করা যেতে পারে যখনই নির্দিষ্ট কী টিপানো হয়, যেমন ট্যাব কী।

বাক্য গঠন

নথি getElementById ( উপাদান )

প্রদত্ত সিনট্যাক্সে, ' উপাদান ” একটি নির্দিষ্ট উপাদানের আইডি বোঝায়।

আসুন নিম্নলিখিত উদাহরণটি পর্যালোচনা করি।

উদাহরণ
নীচের উদাহরণে, পূর্ববর্তী পদ্ধতিতে আলোচনা করা হিসাবে একটি ইনপুট প্রকার এবং একটি স্থানধারক মান অন্তর্ভুক্ত করুন:

< ইনপুট প্রকার = 'পাঠ্য' আইডি = 'ট্যাব' স্থানধারক = 'লেখা অন্তর্ভুক্ত করুন' >

এখন, ' ব্যবহার করে ইনপুট ফিল্ড আইডি আনুন document.getElementById() 'পদ্ধতি।

let input= document.getElementById('ট্যাব');

অবশেষে, 'নামক একটি ইভেন্ট যোগ করুন কীডাউন 'addEventListener() পদ্ধতিতে, যা ব্যবহারকারীকে সতর্ক করবে যখনই ' ট্যাব ' কী চাপা হয়:

ইনপুট. AddEventListener ( 'কীডাউন' , ( এবং ) => {
যদি ( এবং. চাবি === 'ট্যাব' ) {
সতর্ক ( 'ট্যাব কী চাপা' ) ;
}
} ) ;

আউটপুট

আমরা জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করার সব সহজ পদ্ধতি নিয়ে আলোচনা করেছি।

উপসংহার

জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করতে, ' AddEventListener() 'এর সাথে' document.querySelector() ইনপুট টাইপ পাওয়ার পদ্ধতি এবং নির্দিষ্ট কী সনাক্ত করার জন্য একটি ইভেন্ট প্রয়োগ করার পদ্ধতি বা ' getElementbyId() ” এর আইডির উপর ভিত্তি করে ইনপুট ক্ষেত্রটি আনার এবং যখনই যোগ করা শর্ত সন্তুষ্ট হয় তখন ব্যবহারকারীকে অবহিত করার পদ্ধতি। এই ব্লগটি জাভাস্ক্রিপ্টে ট্যাব কী সনাক্ত করার বিষয়ে নির্দেশিত।