tabindex ගුණාංගය
tabindex ගුණාංගය අංග අතර ගමන් කරන විට
Tab යතුර භාවිතයෙන් යතුරුපුවරු අවධානය ලබා ගැනීමේ
අනුපිළිවෙල සකසා ඇත.
මෙම යතුර එබීමෙන් පිටුවේ ඇතැම් අංග (සබැඳි සහ පෝරම අංග) පිළිවෙලින් සක්රිය කළ හැකිය. සක්රිය අංග යතුරුපුවරු අවධානය ලබා ගනී.
input
සහ textarea
වර්ගයේ ආදාන ක්ෂේත්ර සඳහා යතුරුපුවරු අවධානය යනු
ක්ෂේත්රයේ කර්සරය මිණිමිණී සිටීම සහ එහි පෙළ ඇතුළු කළ හැකි වීමයි.
සබැඳි
සහ අනෙකුත් අංග සඳහා මෙය
යම් ආකාරයකින් ඉස්මතු කිරීමක් වනු ඇත (යටින් ඉරි ඇඳීම,
ඉරි ඇඳි මායිමකින් වට කිරීම ආදිය, බ්රවුසරය මත රඳා පවතී).
යතුරුපුවරු අවධානය ලබා ගැනීමේ මොහොතේ අංගය පිටුවේ දක්නට නොමැති නම් (ස්ක්රෝල් කිරීම හේතුවෙන්), පිටුව එම අංගය දක්වා ස්ක්රෝල් වනු ඇත.
අංගවලට tabindex ගුණාංගය සකසා නොමැති නම්
හෝ එය 0 අගයක් ගන්නේ නම්, Tab යතුර භාවිතයෙන්
ඒවා හරහා ගමන් කිරීම HTML කේතයේ අංග පිළිවෙලට සිදුවනු ඇත.
පිටුවේ 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,
area ටැග වලටය.
උදාහරණය
අපි ආදාන ක්ෂේත්රවලට
tabindex ගුණාංගය සකසමු.
පිළිවෙලින් Tab යතුර එබූ විට, ඔබට දකිනු ඇත
යතුරුපුවරු අවධානය පළමු ආදාන ක්ෂේත්රයෙන්
සිව්වන ආදාන ක්ෂේත්රයට ගමන් කරන අතර, පසුව
පිටුවේ ආරම්භයේ සිට සබැඳි හරහා යන්නේ
(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,
එය යතුරුපුවරු අවධානය ලත් අංගයේ විලාසයන් වෙනස් කිරීමට ඉඩ සලසයි
