Attributtet tabindex
Attributtet tabindex setter rekkefølgen
for fokusovertakelse når man navigerer mellom elementer
med Tab-tasten.
Ved å trykke på denne tasten kan man aktivere sekvensielt noen av sidens elementer (lenker og skjemaelementer). Aktive elementer vil motta inndatasfokus.
For inndatafelt av typen input
og textarea
vil fokus uttrykkes ved at markøren
blinker i feltet og man kan
skrive inn tekst, for
lenker og andre elementer vil dette
være en utheving på en eller annen måte (understreking,
stiplet ramme etc., avhenger av nettleseren).
Hvis elementet ikke var synlig på siden (på grunn av rulling) i øyeblikket det mottar fokus, vil siden rulle til dette elementet.
Hvis elementer ikke har attributtet tabindex
eller det har verdien 0, vil navigering
til dem med Tab-tasten skje i rekkefølgen
elementene vises i HTML-koden.
Hvis siden har elementer som har satt
tabindex, vil navigeringen først
gå gjennom dem, startende fra den minste verdien
av attributtet tabindex (den minste kan være én)
og så videre i stigende rekkefølge av attributtverdier,
og når slike elementer
er ferdige - vil navigeringen gå til de elementene
som ikke har satt tabindex eller som har
verdien 0.
Verdien til attributtet er heltall fra
1 til uendelig. Hvis noen
numre mangler - skjer det ingen katastrofe
(for eksempel, hvis nummer 2 mangler, vil
fokus først havne på elementet med tabindex
lik 1, og deretter på elementet med tabindex
lik 3).
Hvis det på siden i øyeblikket Tab-tasten trykkes
er et element i fokus (fokus kunne
ha blitt oppnådd ikke bare ved å trykke Tab,
men også ved å klikke på elementet med musepekeren eller med attributtet
autofocus),
vil det neste trykket på Tab-tasten føre
til at fokus går til det neste elementet i rekkefølgen
etter det som er i fokus (for eksempel,
hvis elementet med tabindex
3 for øyeblikket er i fokus, vil neste element
som får fokus være elementet
med tabindex 4).
Hvis et inndatafelt har attributtet disabled,
vil det bli ignorert under navigering med
Tab-tasten, selv om dette feltet har attributtet
tabindex.
Attributtet tabindex brukes på taggene
a,
input,
textarea,
button,
select,
area.
Eksempel
La oss gi input-feltene
attributtet tabindex. Trykk sekvensielt
på Tab-tasten og du vil se
hvordan inndatasfokus vil gå fra første
input-felt til det fjerde, og deretter gå gjennom lenkene
fra starten av siden (siden det ikke er flere elementer
med satt attributt tabindex):
<input type="text" tabindex="3" placeholder="nummer: 3">
<input type="text" tabindex="1" placeholder="nummer: 1">
<input type="text" tabindex="2" placeholder="nummer: 2">
<input type="text" tabindex="4" placeholder="nummer: 4">
:
Se også
-
pseudoklassen
focus,
som lar deg endre stilen til et element i fokus
