Атрыбут tabindex
Атрыбут tabindex устанаўлівае парадак
атрымання фокуса пры пераходзе паміж элементамі
з дапамогай клавішы Tab.
Націскаючы гэтую клавішу можна актываваць паслядоўна некаторыя элементы старонкі (спасылкі і элементы формаў). Актыўныя элементы будуць атрымліваць фокус ўводу.
Для палёў ўводу тыпу input
і textarea
фокус будзе выяўляцца ў тым, што ў поле
будзе маргаць курсор і ў яго можна будзе
ўводзіць тэкст, для
спасылак і іншых элементаў гэта
будзе вылучэнне якім-небудзь чынам (падкрэсленне,
абвядзенне пункцірнай мяжой і г.д., залежыць
ад браўзера).
Калі ў момант атрымання фокуса элемент не быў бачны на старонцы (з-за пракруткі), то старонка пракруціцца да гэтага элемента.
Калі элементам не зададзены атрыбут tabindex
ці ён мае значэнне 0, то пераход
па іх клавішай Tab будзе ісці ў парадку
слядавання элементаў у HTML кодзе.
Калі на старонцы ёсць элементы, якім зададзены
tabindex, то спачатку пераход будзе
ісці па іх, пачынаючы ад меншага значэння
атрыбута 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="number: 3">
<input type="text" tabindex="1" placeholder="number: 1">
<input type="text" tabindex="2" placeholder="number: 2">
<input type="text" tabindex="4" placeholder="number: 4">
:
Глядзіце таксама
-
псеўдаклас
focus,
які дазваляе мяняць стылі элемента ў фокусе
