জাভাস্ক্রিপ্টে টেক্সট ফিল্ডের ফোকাস
ধরুন আমাদের একটি ইনপুট আছে। আপনি এই ইনপুটটিতে ক্লিক করতে পারেন এবং তারপর এতে একটি ব্লিঙ্কিং কার্সর দেখা যাবে এবং আপনি এতে টেক্সট টাইপ করতে পারবেন।
এই অবস্থাকে বলা হয় যে ইনপুটটির বর্তমানে ইনপুট ফোকাস আছে। অনুশীলনে এর মানে হল যে যদি আপনি কীবোর্ড থেকে টেক্সট টাইপ করা শুরু করেন, তবে সেই টেক্সটটি সেই ইনপুটে যাবে যার বর্তমানে ইনপুট ফোকাস আছে। যদি তারপর ইনপুটটির বাইরে কোথাও ক্লিক করা হয়, তবে এই ইনপুটটি ফোকাস হারাবে এবং এতে আর টেক্সট টাইপ করা যাবে না।
ইনপুট দ্বারা ফোকাস পাওয়া বা হারানোর মুহূর্তটি ধরার জন্য,
জাভাস্ক্রিপ্টে বিশেষ ইভেন্ট রয়েছে:
focus ইভেন্টটি
ইনপুট দ্বারা ফোকাস পাওয়াকে ধরতে দেয়,
এবং blur ইভেন্টটি - ফোকাস হারানোকে। আসুন
প্রয়োগ করে দেখি। ধরুন আমাদের একটি ইনপুট আছে:
<input id="elem" value="text">
এটিকে একটি ভেরিয়েবলে রেফারেন্স করি:
let elem = document.querySelector('#elem');
এবং এখন এমন করি যাতে ফোকাস পাওয়ার সময় কনসোলে ইনপুটের বর্তমান টেক্সট প্রিন্ট হয়:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
একটি ইনপুট দেওয়া আছে। ফোকাস পাওয়ার সময়
এতে 1 সংখ্যাটি লিখুন, এবং ফোকাস হারানোর সময় -
2 সংখ্যাটি লিখুন।
একটি ইনপুট দেওয়া আছে। ধরুন এতে একটি সংখ্যা ইনপুট করা হয়। ফোকাস হারানোর সময় সেই সংখ্যার বর্গ প্রিন্ট করুন।
একটি ইনপুট দেওয়া আছে, যাতে শুরুতে কিছু টেক্সট আছে। ইনপুট দ্বারা ফোকাস পাওয়ার সময় এই ইনপুটটির কন্টেন্ট ক্লিয়ার করুন।
