Attributten tabindex
Attributten tabindex fastsætter rækkefølgen
for fokus, når man navigerer mellem elementer
med Tab-tasten.
Ved at trykke på denne tast kan man aktivere sekventielt visse elementer på siden (links og formular-elementer). Aktive elementer vil modtage indtastningsfokus.
For inputfelter af typen input
og textarea
vil fokus udtrykkes ved, at markøren
vil blinke i feltet, og man kan
indtaste tekst, for
links og andre elementer vil det
være en fremhævelse på en eller anden måde (understregning,
stiplet ramme osv., afhænger af browseren).
Hvis elementet ikke var synligt på siden (på grund af scrolling) i det øjeblik, det modtog fokus, vil siden scrolle til dette element.
Hvis elementerne ikke har attributten tabindex
eller den har værdien 0, vil navigation
til dem med Tab-tasten foregå i rækkefølgen
af elementerne i HTML-koden.
Hvis siden har elementer, som har
tabindex sat, vil navigationen først
foregå til dem, startende fra den mindste værdi
af attributten tabindex (den mindste kan være 1)
og så videre opad efter stigende attributværdier,
og når sådanne elementer
slipper - vil navigationen fortsætte til de elementer,
som ikke har tabindex sat eller som har
værdien 0.
Værdien for attributten er heltal fra
1 til uendeligt. Hvis nogle
numre er sprunget over - sker der ikke noget forfærdeligt
(for eksempel, hvis der ikke er noget nummer 2, så
vil fokus først komme på elementet med tabindex
lig 1, og derefter på elementet med tabindex
lig 3).
Hvis der på siden i øjeblikket for trykket af
Tab-tasten er et element i fokus (fokus kunne
være opnået ikke kun ved at trykke på Tab,
men også ved at klikke med musen på elementet eller med attributten
autofocus),
så vil det næste tryk på Tab-tasten føre
til, at fokus gives til det næste element i rækkefølgen
efter det, som er i fokus (for eksempel,
hvis der lige nu er fokus på elementet med tabindex
3, så vil det næste element med tabindex
4 modtage fokus).
Hvis et inputfelt har attributten disabled,
så vil det blive ignoreret ved navigation med
Tab-tasten, selvom dette felt har attributten
tabindex sat.
Attributten tabindex anvendes på tags
a,
input,
textarea,
button,
select.
Eksempel
Lad os give inputfelterne
attributten tabindex. Tryk sekventielt
på Tab-tasten, og du vil se,
hvordan indtastningsfokus vil gå fra det første
inputfelt til det fjerde, og derefter fortsætte til links
fra starten af siden (da der ikke er flere elementer
med den satte attribut 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 gør det muligt at ændre stilen for et element i fokus
