tabindex ဂုဏ်သတ္တိ

tabindex ဂုဏ်သတ္တိသည် အစိတ်အပိုင်းများအကြား ရွှေ့သွားသည့်အခါ ဖိုကပ်စ်ရယူရန်အစီအစဉ်ကို သတ်မှတ်ပေးပါသည်။

ဤခလုတ်ကိုနှိပ်ခြင်းဖြင့် စာမျက်နှာရှိ အချို့သောအစိတ်အပိုင်းများကို အစဉ်အတိုင်း အသက်ဝင်စေနိုင်သည် (လင့်ခ်များ နှင့် ဖောင်များ၏ အစိတ်အပိုင်းများ)။ အသက်ဝင်သောအစိတ်အပိုင်းများသည် ဖိုကပ်စ်ကိုရယူပါလိမ့်မည်။

input အမျိုးအစား ဖြည့်ရန်အကွက်များနှင့် textarea တို့အတွက် ဖိုကပ်စ်သည် အကွက်တွင် cursor မှိတ်တုတ်မှိတ်တုတ်ဖြစ်နေခြင်းနှင့် စာသားရိုက်ထည့်နိုင်ခြင်းတို့ဖြင့် ပြသပါလိမ့်မည်။ လင့်ခ်များ နှင့် အခြားအစိတ်အပိုင်းများအတွက် ၎င်းသည် တစ်နည်းနည်းဖြင့် မျဉ်းသားခြင်း၊ မျဉ်းပြတ်နယ်နိမိတ်ဖြင့် ဝိုင်းရံခြင်း စသည်ဖြင့် ထင်ရှားစေပါလိမ့်မည် (ဘရောက်ဆာအလိုက် ကွဲပြားပါသည်)။

ဖိုကပ်စ်ရယူသည့်အချိန်တွင် အစိတ်အပိုင်းသည် စာမျက်နှာပေါ်တွင် မမြင်ရပါက (စကရွင်လှန်ခြင်းကြောင့်)၊ စာမျက်နှာသည် ထိုအစိတ်အပိုင်းဆီသို့ လှန်သွားပါလိမ့်မည်။

အစိတ်အပိုင်းများကို tabindex ဂုဏ်သတ္တိ မသတ်မှတ်ထားပါက သို့မဟုတ် ၎င်း၏တန်ဖိုးသည် 0 ဖြစ်ပါက၊ ၎င်းတို့အကြား Tab ခလုတ်ဖြင့်ရွှေ့သွားခြင်းသည် HTML code တွင်အစိတ်အပိုင်းများစီတန်းပုံစဉ်အတိုင်းဖြစ်ပါမည်။

စာမျက်နှာပေါ်တွင် tabindex သတ်မှတ်ထားသော အစိတ်အပိုင်းများရှိပါက၊ အစပိုင်းတွင် ရွှေ့သွားခြင်းသည် ၎င်းတို့အကြား ဂုဏ်သတ္တိ၏တန်ဖိုးငယ်ရာမှစတင်၍ (အနည်းဆုံးတန်ဖိုးမှာ တစ်ဖြစ်နိုင်သည်) ဖြစ်ပြီး ဂုဏ်သတ္တိတန်ဖိုးများတိုးလာသည်နှင့်အမျှ ဆက်လက်ဖြစ်ပါမည်။ ထိုသို့သောအစိတ်အပိုင်းများကုန်ဆုံးသွားပါက၊ ရွှေ့သွားခြင်းသည် tabindex မသတ်မှတ်ထားသော သို့မဟုတ် ၎င်း၏တန်ဖိုးသည် 0 ဖြစ်သော အစိတ်အပိုင်းများဆီသို့ ဆက်လက်သွားပါလိမ့်မည်။

ဂုဏ်သတ္တိ၏တန်ဖိုးသည် ကိန်းပြည့်များဖြစ်ပြီး 1 မှ အဆုံးမရှိသော ဂဏန်းအထိဖြစ်သည်။ အကယ်၍ နံပါတ်အချို့ ချန်လှပ်ထားပါက မည်သည့်ပြဿနာမျှမဖြစ်ပါ (ဥပမာ၊ နံပါတ် 2 မရှိပါက၊ ပထမဦးစွာ ဖိုကပ်စ်သည် tabindex ညီမျှသော 1 ရှိသောအစိတ်အပိုင်းဆီရောက်ပြီး ထို့နောက် tabindex ညီမျှသော 3 ရှိသောအစိတ်အပိုင်းဆီရောက်ပါမည်)။

Tab ခလုတ်ကိုနှိပ်သည့်အချိန်တွင် စာမျက်နှာပေါ်တွင် ဖိုကပ်စ်ရှိသောအစိတ်အပိုင်း တစ်ခုရှိပါက (ဖိုကပ်စ်ကို Tab နှိပ်ခြင်းဖြင့်သာမက အစိတ်အပိုင်းကို mouse ဖြင့်နှိပ်ခြင်း သို့မဟုတ် autofocus ဂုဏ်သတ္တိဖြင့်လည်း ရနိုင်သည်)၊ ထို့နောက် Tab ခလုတ်နှိပ်ခြင်းသည် လက်ရှိဖိုကပ်စ်ရှိသောအရာပြီးနောက် နောက်အစီအစဉ်ကျသော အစိတ်အပိုင်းဆီသို့ ဖိုကပ်စ်ရောက်စေပါမည် (ဥပမာ၊ လက်ရှိတွင် ဖိုကပ်စ်သည် tabindex 3 ရှိသောအစိတ်အပိုင်းတွင်ရှိပါက၊ နောက်တစ်ခုတွင် ဖိုကပ်စ်သည် tabindex 4 ရှိသောအစိတ်အပိုင်းဆီရောက်ပါမည်)။

ဖြည့်ရန်အကွက်တစ်ခုကို disabled ဂုဏ်သတ္တိသတ်မှတ်ထားပါက၊ ၎င်းကို Tab ခလုတ်ဖြင့်ရွှေ့သွားခြင်းမှ လျစ်လျူရှုပါလိမ့်မည်၊ ထိုအကွက်ကို tabindex ဂုဏ်သတ္တိသတ်မှတ်ထားသည်ဖြစ်စေပင်ဖြစ်သည်။

tabindex ဂုဏ်သတ္တိကို a, input, textarea, button, select, area အမှတ်အသားများတွင် အသုံးပြုပါသည်။

ဥပမာ

ကျေးဇူးပြု၍ input များကို tabindex ဂုဏ်သတ္တိသတ်မှတ်ကြည့်ပါ။ Tab ခလုတ်ကို အစဉ်အတိုင်းနှိပ်ကြည့်ပါက ဖိုကပ်စ်သည် ပထမ input မှ စတုတ္ထ input သို့ ရွှေ့သွားသည်ကိုတွေ့ရပြီး ထို့နောက် စာမျက်နှာ၏အစမှ လင့်ခ်များဆီသို့ ဆက်လက်သွားမည်ဖြစ်ကြောင်း တွေ့ရပါမည် (အကြောင်းမှာ tabindex ဂုဏ်သတ္တိသတ်မှတ်ထားသော အစိတ်အပိုင်းများ မရှိတော့သောကြောင့်ဖြစ်သည်)။

<input type="text" tabindex="3" placeholder="နံပါတ်: 3">
<input type="text" tabindex="1" placeholder="နံပါတ်: 1">
<input type="text" tabindex="2" placeholder="နံပါတ်: 2">
<input type="text" tabindex="4" placeholder="နံပါတ်: 4">

ဆက်လက်ကြည့်ရှုရန်

focus pseudoclass,
ဖိုကပ်စ်ရှိသောအစိတ်အပိုင်း၏ style များကို ပြောင်းလဲခွင့်ပြုသည်