اتریبیوت tabindex
در بسیاری موارد نیاز است تا کاربر بتواند با فشردن کلید tab فیلد دلخواه خود را انتخاب کند. زمانی که صفحه دارای چند المان است برای آنکه مشخص شود با فشردن کلید tab به ترتیب چه المان هایی فعال خواهد شد، از اعداد به عنوان مقدار ورودی اتریبیوت tabindex استفاده می شود. در کد زیر چهار المان داریم که با فشردن کلید tab به نوبت فعال می شوند. هر چه مقدار این اتریبیوت کمتر باشد، اولویت آن بالاتر خواهد بود. همان طور که مشاهده می شود، از اتریبیوت tabindex می توان در هر کدام از المان ها استفاده نمود.
چنانچه کد فوق را اجرا کنید، با فشردن کلید tab به ترتیت فیلدهای با id=”1”، id”4”، id=”3” و id=”2” فعال خواهند شد، زیرا اولویت با مقادیر کمتر tabindex است.
در تصویر زیر همان طور که مشاهده می شود، پس از سه بار فشردن کلید tab، فیلد سوم فعال شده است.
<body>
<div id="1" tabindex="1">Field First <input type="checkbox"></div>
<div>Field Second <input id="2" type="radio" tabindex="4"></div>
<div id="3" tabindex="3">Field Third <input type="text"></div>
<div>Field Forth <input id="4" type="button" value="دکمه" tabindex="2"></div>
</body>
<div id="1" tabindex="1">Field First <input type="checkbox"></div>
<div>Field Second <input id="2" type="radio" tabindex="4"></div>
<div id="3" tabindex="3">Field Third <input type="text"></div>
<div>Field Forth <input id="4" type="button" value="دکمه" tabindex="2"></div>
</body>
چنانچه کد فوق را اجرا کنید، با فشردن کلید tab به ترتیت فیلدهای با id=”1”، id”4”، id=”3” و id=”2” فعال خواهند شد، زیرا اولویت با مقادیر کمتر tabindex است.
در تصویر زیر همان طور که مشاهده می شود، پس از سه بار فشردن کلید tab، فیلد سوم فعال شده است.
