ატრიბუტი tabindex
ატრიბუტი tabindex ადგენს თანმიმდევრობას
ფოკუსის მიღებისა Tab ღილაკის გამოყენებით
ელემენტებს შორის გადაადგილებისას.
ამ ღილაკის დაჭერით შესაძლებელია გააქტიურდეს თანმიმდევრულად გვერდის ზოგიერთი ელემენტი (ბმულები და ფორმების ელემენტები). აქტიური ელემენტები მიიღებენ შეყვანის ფოკუსს.
შეყვანის ველებისთვის ტიპის input
და textarea
ფოკუსი გამოიხატება იმაში, რომ ველში
მოციმციმე კურსორი გამოჩნდება და მასში შესაძლებელი იქნება
ტექსტის შეყვანა, ბმულებისთვის
და სხვა ელემენტებისთვის ეს
იქნება გარკვეული გზით ხაზგასმა (გაუსვით ხაზი,
წყვეტილი საზღვრით შემოხაზვა და ა.შ., დამოკიდებულია
ბრაუზერზე).
თუ ფოკუსის მიღების მომენტში ელემენტი არ იყო ხილული გვერდზე (გადახვევის გამო), მაშინ გვერდი გადაიხვევა ამ ელემენტისკენ.
თუ ელემენტებს არ აქვთ მინიჭებული ატრიბუტი tabindex
ან მას აქვს მნიშვნელობა 0, მაშინ გადასვლა
მათზე Tab ღილაკით მოხდება თანმიმდევრობით
ელემენტების HTML კოდში მდებარეობისა.
თუ გვერდზე არის ელემენტები, რომლებსაც აქვთ მინიჭებული
tabindex, მაშინ თავდაპირველად გადასვლა
მოხდება მათზე, დაწყებული ატრიბუტის უფრო მცირე მნიშვნელობიდან
tabindex (ყველაზე პატარა შეიძლება იყოს ერთი)
და ასე შემდეგ ატრიბუტის მნიშვნელობების ზრდის მიხედვით,
და როცა ასეთი ელემენტები
დასრულდება - გადასვლა გაგრძელდება იმ ელემენტებზე,
რომლებსაც არ აქვთ მინიჭებული tabindex ან მას აქვს
მნიშვნელობა 0.
ატრიბუტის მნიშვნელობაა მთელი რიცხვები
1-დან უსასრულობამდე. თუ ზოგიერთი
ნომერი გამოტოვებულია - არაფერი საშინელი არ მოხდება
(მაგალითად, თუ არ არის ნომერი 2, მაშინ
ჯერ ფოკუსი მოხვდება ელემენტზე tabindex-თი,
რომელიც უდრის 1-ს, და შემდეგ ელემენტზე tabindex-თი,
რომელიც უდრის 3-ს).
თუ გვერდზე ღილაკის დაჭერის მომენტში
არის ელემენტი ფოკუსში (ფოკუსი შეიძლება
მიღებულიყო არა მხოლოდ 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,
რომელიც საშუალებას აძლევს შეცვალოს ელემენტის სტილები ფოკუსში
