ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে প্রথম ফর্ম ইনপুট ফিল্ডে অটো-ফোকাস দেওয়া

HTML ফর্মে পেজ লোড হলে প্রথম ইনপুট ফিল্ডে অটো-ফোকাস দেওয়ার পদ্ধতি শিখুন

ভালো 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 ফাইলে এই জাভাস্ক্রিপ্ট onload ফাংশনটি যোগ করুন:

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

অটো-ফোকাস ইনপুট ফিল্ড অন পেজ লোড ডেমো

নিচের ডেমোটি চেক করুন:

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

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

HTML ফর্মটি দেখুন। HTML ফর্মের প্রথম ইনপুট ফিল্ডের ID হলো firstField — এটি আমরা জাভাস্ক্রিপ্ট দিয়ে টার্গেট করছি।

জাভাস্ক্রিপ্টে, আমরা একটি onload ইভেন্ট সেট আপ করি window.onload নামে যা তাত্ক্ষণিক রান করে যখন আপনি একটি নতুন পেজে যান বা ব্রাউজার রিফ্রেশ করেন।

onload ইভেন্টটি একটি ফাংশন এক্সিকিউট করে যা document.getElementById দিয়ে firstField ID-যুক্ত ইনপুট ফিল্ডটি খুঁজে বের করে এবং তারপর জাভাস্ক্রিপ্ট focus() মেথড ব্যবহার করে ইনপুট ফিল্ডের স্টেট-কে ফোকাসে সেট করে।

ট্রাবলশুটিং

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