حسین همت یار
جابجایی بین عناصر فرم با خصوصیت tabindex
سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان
امروز داشتم کدنویسی می کردم که حین کار با یکی از خصوصیات متوجه شدم چقدر میتونه گاهی اوقات این خصوصیت مفید باشه، تصمیم گرفتم این خصوصیت رو بهتون معرفی کنم تا دوستانی که با این خصوصیت آشنا نیستن، باهاش آشنا بشن.
تو html یه خصوصیتی بنام TabIndex وجود داره که به شما اجازه میده با زدن دکمه tab بین عناصر حرکت کنید. مثلا شما یه فرم طراحی می کنید که شامل فیلدهای زیادی میشه و کاربر برای پر کردن این فیلدها نیاز داره با زدن دکمه tab بین اونها جایجا بشه، چرا که استفاده از موس برای تمرکز روی هر فیلد ،کار رو خیلی سخت میکنه. برای سهولت تو این کار از tabindex استفاده می کنیم.
بصورت پیش فرض این امکان روی عناصر وجود داره اما شاید شما بخواین طبق اولویت این کار انجام بشه ، پس بصورت زیر tabindex رو برای عناصرمون تعریف می کنیم :
|
۱ ۲ ۳ ۴ ۵ |
<a href="http://mag.www.iranweblearn.com" tabindex="۲"> ماهنامه طراحی وب </a> <a href="http://iranweblearn.com" tabindex="۱"> مدرسه مجازی ایرانیان </a> <a href="http://iranweblearn.com/ask" tabindex="۳"> سامانه پرسش و پاسخ </a> |
تو مثال بالا با زدن دکمه tab ابتدا روی گزینه مدرسه مجازی ایرانیان متمرکز میشید و با فشردن مجدد دکمه tab به گزینه ماهنامه طراحی وب هدایت میشید و در آخر روی سامانه پرسش و پاسخ تمرکز می کنید.
این خصوصیت با عدد مقدار دهی میشه که طبق اولویت این اعداد رو به عناصر اختصاص میدید، فقط دقت داشته باشید عدد تکراری وارد نکنید.
این خصوصیت روی عناصر زیر قابل پیاده سازیه و تمامی مرورگرها هم اون رو پشتیبانی می کنند :
<a>, <area>, <button>, <input>, <object>, <select>, <textarea>
خوب دوستان امیدوارم یک روز این مقاله به کارتون بیاد.
موفق و پاینده باشید
تهیه شده در مدرسه مجازی ایرانیان
محمد هادی اعظمی
عالی بود – ممنون از مقاله ی زیبایی که نوشتید .