ভ্যানিলা জাভাস্ক্রিপ্টের সাথে প্রথম ফর্ম ইনপুট ক্ষেত্রটি কীভাবে স্বয়ংক্রিয়ভাবে ফোকাস করবেন

এইচটিএমএল ফর্মগুলিতে পৃষ্ঠা লোডের প্রথম ইনপুট ক্ষেত্রটি কীভাবে স্বয়ংক্রিয়ভাবে ফোকাস করা যায় তা শিখুন

ভাল UX ডিজাইনের অন্তর্নিহিত প্রাঙ্গনের মধ্যে একটি হল a থেকে b তে যাওয়ার জন্য যতটা সম্ভব পদক্ষেপ সংরক্ষণ করা যাতে আমাদের ব্যবহারকারীরা যা চান তা দ্রুত পেতে পারেন।

কেউ ফর্ম পূরণ করতে পছন্দ করে না, বিশেষ করে দীর্ঘ ফর্ম নয়, তাই আসুন পৃষ্ঠা লোডের সময় আপনার HTML ফর্মগুলির প্রথম ইনপুট ক্ষেত্রে স্বয়ংক্রিয়ভাবে ফোকাস করে আপনার ব্যবহারকারীদের একটু সময় বাঁচাই৷

HTML ফর্ম

আপনার HTML নথিতে এই ফর্ম কোড যোগ করুন:

<form>
	First name:<br>
	<input type="text" name="firstname" id="firstField"><br>Last name:<br>
	<input type="text" name="lastname"><br>Country:<br>
	<input type="text" name="lastname">
</form>

জাভাস্ক্রিপ্ট

এই জাভাস্ক্রিপ্ট অনলোড ফাংশনটি আপনার .js ফাইলে যোগ করুন:

window.onload = function() {
  document.getElementById("firstField").focus();
};

পৃষ্ঠা লোড ডেমোতে অটো-ফোকাস ইনপুট ক্ষেত্র

নীচের ডেমো দেখুন:

https://codepen.io/StrengthandFreedom/pen/yLypogQ

কোড কিভাবে কাজ করে

এইচটিএমএল ফর্মটি একবার দেখুন। HTML ফর্মের প্রথম ইনপুট ক্ষেত্রের IDটিকে firstField বলা হয় — আমরা জাভাস্ক্রিপ্টের সাথে এটিই লক্ষ্য করি।

JavaScript-এ, আমরা window.onload নামে একটি অনলোড ইভেন্ট সেট আপ করি আপনি যখন একটি নতুন পৃষ্ঠায় যান বা আপনার ব্রাউজার রিফ্রেশ করেন তখন তা অবিলম্বে চলে।

অনলোড ইভেন্ট এমন একটি ফাংশন চালায় যা firstField দিয়ে ইনপুট ক্ষেত্র খুঁজে পায় document.getElementById এর মাধ্যমে আইডি এবং তারপর JavaScript focus() ব্যবহার করে state সেট করার পদ্ধতি ফোকাস করার জন্য ইনপুট ক্ষেত্রের।

সমস্যা নিবারণ

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