HTML <button> autofocus অ্যাট্রিবিউট

`<button>` autofocus অ্যাট্রিবিউট

<button> এলিমেন্টের autofocus অ্যাট্রিবিউট (বুলিয়ান) ব্যবহার করলে পেজ লোড হয়ে যাওয়ার সাথে সাথে সেই বাটনটি অটোমেটিক্যালি ফোকাস পায়। ব্যবহারকারী ট্যাব দবায় না ফোকাস পায়।

সিনট্যাক্স

<button type="button" autofocus>বাটন টেক্সট</button>

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2>ডেমো হেডিং</h2>
  <p>এটি একটি ডেমো লাইন।</p>
  <button type="button" autofocus>ডেমো</button>
</body>
</html>

আউটপুট

HTML <button> autofocus অ্যাট্রিবিউট

পেজ লোড হলে বাটনটি ফোকাস্ড অবস্থায় থাকে (ব্রাউজার অনুযায়ী আউটলাইন বা হাইলাইট দেখা যেতে পারে):

<button type="button" autofocus>Demo</button>

গুরুত্বপূর্ণ নোটস

এক পেজে শুধু একটি এলিমেন্টে autofocus থাকা উচিত। একাধিক থাকলে প্রথমটি ফোকাস পায়।
এটি একটি গ্লোবাল অ্যাট্রিবিউট — যেকোনো ফোকাসযোগ্য এলিমেন্টে (<input>, <textarea>, <select>, <button>) ব্যবহার করা যায়।
মোবাইল ব্রাউজারগুলোতে অটোফোকাস বাধা দিয়ে থাকতে পারে (ভirtual কিবোর্ড পপ আপ না হয় সেই জন্য)।
অ্যাক্সেসিবিলিটি: অটোফোকাস স্ক্রিন রিডার ব্যবহারকারীদের বিভ্রান্ত করতে পারে, সাবধানতার সাথে ব্যবহার করুন।

JavaScript-এ ফোকাস চেক

// বাটনটি ফোকাস পেয়েছে কিনা চেক
const btn = document.querySelector('button[autofocus]');
console.log(document.activeElement === btn); // true হলে ফোকাস আছে