ট্যাবইনডেক্স অ্যাট্রিবিউট

tabindex অ্যাট্রিবিউটটি Tab কী ব্যবহার করে এলিমেন্টগুলির মধ্যে স্থানান্তর করার সময় ফোকাস পাওয়ার ক্রম নির্ধারণ করে।

এই কী চেপে পৃষ্ঠার কিছু এলিমেন্টকে (লিঙ্কগুলি এবং ফর্ম এর এলিমেন্টগুলি) ক্রমানুসারে সক্রিয় করা যায়। সক্রিয় এলিমেন্টগুলি ইনপুট ফোকাস পাবে।

input এবং textarea টাইপের ইনপুট ক্ষেত্রগুলির জন্য ফোকাসটি প্রকাশ পাবে এইভাবে যে ক্ষেত্রে কার্সার জ্বলজ্বল করবে এবং এতে টেক্সট ইনপুট করা যাবে, লিঙ্কগুলির জন্য এবং অন্যান্য এলিমেন্টের জন্য এটি কোনওভাবে হাইলাইট করা হবে (আন্ডারলাইন, ডটেড বর্ডার ইত্যাদি, ব্রাউজারের উপর নির্ভর করে)।

যদি ফোকাস পাওয়ার মুহূর্তে এলিমেন্টটি পৃষ্ঠায় দৃশ্যমান না থাকে (স্ক্রোলিং এর কারণে), তাহলে পৃষ্ঠাটি সেই এলিমেন্টে স্ক্রোল হবে।

যদি এলিমেন্টগুলিকে tabindex অ্যাট্রিবিউট দেওয়া না হয় বা এর মান 0 হয়, তাহলে Tab কী দিয়ে তাদের মধ্যে স্থানান্তর HTML কোডে এলিমেন্টগুলির ক্রমানুসারে হবে।

যদি পৃষ্ঠায় এমন এলিমেন্ট থাকে যাদেরকে tabindex দেওয়া হয়েছে, তবে প্রথমে স্থানান্তরটি তাদের মধ্য দিয়ে যাবে, tabindex অ্যাট্রিবিউটের ছোট মান থেকে শুরু করে (সবচেয়ে ছোট হতে পারে এক) এবং এরপর অ্যাট্রিবিউটের মান বৃদ্ধি অনুসারে, এবং যখন এইরকম এলিমেন্ট শেষ হয়ে যাবে - তখন স্থানান্তরটি সেইসব এলিমেন্টের মধ্য দিয়ে যাবে, যাদেরকে tabindex দেওয়া হয়নি বা যার মান 0 আছে।

অ্যাট্রিবিউটের মান হল 1 থেকে অসীম পর্যন্ত পূর্ণসংখ্যা। যদি কিছু নম্বর বাদ পড়ে - তেমন কিছু ঘটবে না (উদাহরণস্বরূপ, যদি 2 নম্বর না থাকে, তবে প্রথমে ফোকাসটি tabindex 1 সমান এলিমেন্টের উপর পড়বে, এবং তারপর tabindex 3 সমান এলিমেন্টের উপর)।

যদি পৃষ্ঠায় Tab কী চাপার মুহূর্তে কোনও এলিমেন্ট ফোকাসে থাকে (ফোকাস শুধুমাত্র Tab চেপে নয়, বরং এলিমেন্টে মাউস ক্লিক করেও পাওয়া যেতে পারে বা autofocus অ্যাট্রিবিউট দিয়েও), তাহলে Tab কী এর পরের চাপটি ফোকাসে থাকা এলিমেন্টের পরের ক্রমানুসারে এলিমেন্টটিকে ফোকাস দেবে (উদাহরণস্বরূপ, যদি বর্তমানে ফোকাসে tabindex 3 সমান এলিমেন্ট থাকে, তবে পরেরটি ফোকাস পাবে tabindex 4 সমান এলিমেন্ট)।

যদি একটি ইনপুট ক্ষেত্রকে disabled অ্যাট্রিবিউট দেওয়া হয়, তাহলে Tab কী এর মাধ্যমে স্থানান্তরগুলি এটি উপেক্ষা করবে, এমনকি যদি এই ক্ষেত্রটিকে tabindex অ্যাট্রিবিউটও দেওয়া হয়।

tabindex অ্যাট্রিবিউটটি নিম্নলিখিত ট্যাগগুলিতে প্রয়োগ করা হয়: a, input, textarea, button, select।

উদাহরণ

চলুন ইনপুট গুলিকে tabindex অ্যাট্রিবিউট দেই। ক্রমানুসারে Tab কী চাপুন এবং আপনি দেখতে পাবেন, কিভাবে ইনপুট ফোকাস প্রথম ইনপুট থেকে চতুর্থ ইনপুটে স্থানান্তরিত হবে, এবং তারপর পৃষ্ঠার শুরু থেকে লিঙ্কগুলির মধ্য দিয়ে যাবে (কারণ tabindex অ্যাট্রিবিউট দেওয়া আর কোনও এলিমেন্ট না থাকায়):

html<input type="text" tabindex="3" placeholder="number: 3">
<input type="text" tabindex="1" placeholder="number: 1">
<input type="text" tabindex="2" placeholder="number: 2">
<input type="text" tabindex="4" placeholder="number: 4">

Результат:

আরও দেখুন