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="нөмір: 3">
<input type="text" tabindex="1" placeholder="нөмір: 1">
<input type="text" tabindex="2" placeholder="нөмір: 2">
<input type="text" tabindex="4" placeholder="нөмір: 4">

Сондай-ақ қараңыз

focus жалған сыныбы,
ол фокустағы элементтің стильдерін өзгертуге мүмкіндік береді