چطور و چگونه از ویژگی tabindex در HTML استفاده کنیم



visibility  
mode_comment   ۰

چطور و چگونه از ویژگی tabindex در HTML استفاده کنیم

در این مطلب در مورد ویژگی tabindex در HTML توضیحاتی رو خواهیم داد و شما رو با نحوه استفاده و کاربرد این ویژگی مفید آشنا خواهیم کرد.

tabindex یک ویژگی سراسری هست که میتونین از اون برای بیشتر المنتهای HTML که دارای محتوا هستند، استفاده کنید. این ویژگی 2 مورد رو کنترل میکنه:

  • مشخص میکنه که المنت مورد نظر میتونه focus بشه یا نه. چه با استفاده از کیبورد و چه با استفاده از متد focus() در Javascript.
  • در چه لحظه و موقعیتی المنت مورد نظر باید focus بشه و میتونین ترتیب focus شدن رو مشخص کنید.

ترتیب focus شدن

برای اینکه متوجه بشیم که tabindex چگونه کار میکنه، در ابتدا بهتره که بدونیم focus در صفحه چگونه کنترل میشه. بصورت پیش فرض 6 المنت هستند که قابلیت focus شدن رو دارند:

  • المنت a با ویژگی href
  • المنت href با ویژگی href
  • المنت button
  • المنت input به جز نوع hidden
  • المنت select
  • المنت textarea

پس بصورت پیش و قبل از اینکه از ویژگی tabindex استفاده کنیم، فقط این 6 مورد قابلیت focus شدن چه با استفاده از کیبورد و چه با استفاده از متد focus در Javascript رو دارند.

مثلا برای اینکه با استفاده از Javascript بر روی یک لینک focus کنیم، بصورت زیر عمل میکنیم:

با اینکار focus بر روی المنت a قرار خواهد گرفت. حالا اگر هیچ دستکاری در بقیه المنتها به وجود نیاورده باشید، به هیچ طریقی نمیتونین بر روی یک المنت div تمرکز یا focus کنید. به همین دلیل کد زیر کار نمیکنه:

این 6 موردی که در بالا معرفی شدند، به همان ترتیبی که در Source code تعریف شدند، برای focus نیز مرتب میشن و هر کدام زودتر تعریف شده باشه زودتر هم focus میشه.

در بیشتر موارد همین حالت پیش‌فرض خوب هست و نیاز نیست که کار خاصی رو انجام بدیم ولی بعضی اوقات پیش میاد که بخوایم نزاریم یک المنت focus بشه و یا اینکه به یک المنت قابلیت focus شدن رو اضافه کنیم و یا اینکه ترتیب focus شدن رو تغییر بدیم. در این مواقع هست که ویژگی tabindex رو باید مورد استفاده قرار بدیم.

چگونه از ویژگی tabindex استفاده کنیم

ویژگی tabindex میتونه برای بیشتر المنتهای HTML اعمال بشه، چه اون المنت بصورت پیش فرض قابلیت focus شدن رو داشته باشه و چه نداشته باشه. مقدار این ویژگی باید یک عدد صحیح باشه و میتونه صفر یا منفی یا مثبت باشه.

مقادیر منفی برای tabindex

وقتی که اعداد منفی مثل -1 رو برای ویژگی tabindex قرار میدین، اون المنت دیگه اصلا قابل focus شدن نیست . پس وقتی کاربر با استفاده از دکمه tab در صفحه جابجا میشه، هیچوقت بر روی این المنتها focus نمیکنه. مثال زیر رو ببینید:

همونطور که میبینید برای المنت button وسطی، ویژگی tabindex رو برابر با -1 قرار دادیم و با اینکار، این المنت focus نخواهد شد.

شما هر مقدار منفی که قرار بدین، باعث میشه که المنت مورد نظر دیگه focus نشه چه اون مقدار -1 باشه و چه -9999. پس برای خوانایی بیشتر پیشنهاد میشه که از -1 برای اینکار استفاده کنید.

مقدار 0 یا صفر برای tabindex

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

زمانی که مقدار 0 رو برای tabindex قرار میدین، باعث میشه که اون المنت به همون ترتیبی که در source کد تعریف شده، focus بشه و به ترتیب طبیعی بازخواهد گشت. اگر از این مقدار برای یک المنتی که focusable نیست مانند یک div استفاده کنید، باعث میشه که اون المنت نیز قابلیت focus شدن رو به دست بیاره.

مثال زیر رو ببینید:

اگر کد بالا رو در مرورگر اجرا کنید، خواهید دید که div بعد از المنت button اول، focus خواهد شد و بعد از اون focus بر روی المنت button آخر قرار میگیره.

مقادیر مثبت برای tabindex

مقادیر مثبت برای ویژگی tabindex باعث میشه که اگر اون المنتها قابل focus شدن رو ندارند، این قابلیت بهشون افزوده بشه و همچنین مقدار مثبت، ترتیب focus شدن رو تغییر میده و از حالت طبیعی خارج میکنه. مقادیر مثبت از 1 شروع و تا هر عددی که بخواید بسته به تعداد المنتی که دارید، میتونین ادامه بدین.

ترتیب focus شدن به این صورته که از tabindex با کمترین مقدار شروع و به tabindex با بیشترین مقدار ختم میشه.

مثال زیر رو ببینید:

در مثال بالا با اینکه المنت div بعد از button تعریف شده ولی چون مقدار tabindex اون مثبت و کمتر از tabindex المنت button هست، پس المنت div زودتر focus خواهد شد.

برای تست کردن ترتیب focus در صفحه خودتون، در ابتدا بر روی url کلیک کنید و بعد از اون کلیک tab رو پشت سر هم فشار بدین تا ترتیب focus رو مشاهده کنید.

focus کردن با javascript و tabindex

علاوه بر اینکه شما میتونین با استفاده از tabindex مشخص کنید که کدام المنتها میتونن focus بشن و با چه ترتیبی focus بشن، میتونین مشخص کنید که کدام المنتها میتونن با استفاده از Javascript بصورت focus در بیان.

اضافه کردن ویژگی tabindex به یک المنت با هر مقداری برای اون، باعث میشه که اون المنت با استفاده از Javascript قابلیت focus شدن رو پیدا بکنه. به این معنا که ما میتونیم اون المنتهایی که قبلا با استفاده از Javascript نمیتونستن focus بشن رو به حالت focus در بیاریم بدون اینکه با استفاده از کیبورد بتونن focus بشن.

برای مثال فرض کنید که یک المنت div با مقدار -1 برای ویژگی tabindex داشته باشیم. بصورت زیر:

اگر ما با استفاده از کیبورد در صفحه جابجا بشیم، این المنت div هیچوقت focus نمیشه. Javascript قابلیت این رو داره که بر روی این المنت که دارای مقدار منفی هست نیز focus کنه. مثال زیر رو ببینید:

حالا اگر این کدها رو در مرورگر اجرا کنید و بر روی button کلیک کنید، div مورد نظر focus خواهد شد.

چه زمانی از tabindex استفاده کنیم

ویژگی tabindex خیلی کاربردی و مفید هست ولی اگر از اون درست استفاده نکنید، میتونه نقش مخربی رو داشته باشه. هر مقدار tabindex باید در شرایط مخصوص به خودش مورد استفاده قرار بگیره.

چه زمانی از مقادیر منفی استفاده کنیم

همونطور که در بالا نیز بیان شد، وقتی برای tabindex مقدار منفی رو قرار میدیم باعث میشه که نتونیم با کیبورد focus کنیم ولی امکان focus با استفاده از Javascript وجود داره.

به عنوان مثال کاربردی و مفید برای این حالت میتونیم به Modal ها اشاره کنیم. المنتی که Modal ها رو در خودش جا میده معمولا div یا section هستند و به همین دلیل قابلیت focus شدن رو بصورت پیش‌فرض ندارند. وقتی که Modal باز میشه ما میخوایم که focus رو بر روی این Modal قرار بدیم تا Screen reader محتوای Modal رو بخونه و متوجه بشه. همچنین ما نمیخوایم که Modal با استفاده از کیبورد و دکمه tab قابل focus شدن باشه. پس به همین دلیل از مقدار منفی برای tabindex استفاده کنیم و با استفاده از javascript بر روی اون focus میکنیم.

مثال زیر رو ببینید:

چه زمانی از مقادیر مثبت استفاده کنیم

تقریبا هیچ موقعی احتیاج نیست که از مقدار مثبت برای tabindex استفاده کنیم و در واقع یک الگوی بد محسوب میشه. وقتی به این نتیجه رسیدید که احتیاج دارید با استفاده از مقدار مثبت، ترتیب focus شدن رو تغییر بدین، بهتره که درون Source code جای المنتها رو عوض کنید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.