জাভাস্ক্রিপ্টে টেক্সট ফিল্ডের ফোকাস

ধরুন আমাদের একটি ইনপুট আছে। আপনি এই ইনপুটটিতে ক্লিক করতে পারেন এবং তারপর এতে একটি ব্লিঙ্কিং কার্সর দেখা যাবে এবং আপনি এতে টেক্সট টাইপ করতে পারবেন।

এই অবস্থাকে বলা হয় যে ইনপুটটির বর্তমানে ইনপুট ফোকাস আছে। অনুশীলনে এর মানে হল যে যদি আপনি কীবোর্ড থেকে টেক্সট টাইপ করা শুরু করেন, তবে সেই টেক্সটটি সেই ইনপুটে যাবে যার বর্তমানে ইনপুট ফোকাস আছে। যদি তারপর ইনপুটটির বাইরে কোথাও ক্লিক করা হয়, তবে এই ইনপুটটি ফোকাস হারাবে এবং এতে আর টেক্সট টাইপ করা যাবে না।

ইনপুট দ্বারা ফোকাস পাওয়া বা হারানোর মুহূর্তটি ধরার জন্য, জাভাস্ক্রিপ্টে বিশেষ ইভেন্ট রয়েছে: focus ইভেন্টটি ইনপুট দ্বারা ফোকাস পাওয়াকে ধরতে দেয়, এবং blur ইভেন্টটি - ফোকাস হারানোকে। আসুন প্রয়োগ করে দেখি। ধরুন আমাদের একটি ইনপুট আছে:

html<input id="elem" value="text">

এটিকে একটি ভেরিয়েবলে রেফারেন্স করি:

javascriptlet elem = document.querySelector('#elem');

এবং এখন এমন করি যাতে ফোকাস পাওয়ার সময় কনসোলে ইনপুটের বর্তমান টেক্সট প্রিন্ট হয়:

javascriptelem.addEventListener('focus', function() {
  console.log(elem.value);
});