Attributet tabindex

Attributet tabindex sätter ordningen i vilken element tar emot fokus när man navigerar mellan element med hjälp av Tab-tangenten.

Genom att trycka på denna tangent kan man sekventiellt aktivera vissa element på sidan (länkar och element i formulär). Aktiva element kommer att ta emot inmatningsfokus.

För inmatningsfält av typen input och textarea kommer fokus att innebära att en markör blinkar i fältet och att text kan skrivas in, för länkar och andra element kommer detta att vara en markering på något sätt (understrykning, prickad ram etc., beror på webbläsaren).

Om elementet inte var synligt på sidan (på grund av scrollning) i det ögonblick det tog emot fokus, kommer sidan att rullas till detta element.

Om element inte har attributet tabindex eller om det har värdet 0, kommer navigering mellan dem med Tab att gå i den ordning elementen förekommer i HTML-koden.

Om sidan har element som har tilldelats tabindex, kommer navigeringen först att gå mellan dem, börjande från det minsta värdet på attributet tabindex (det minsta värdet kan vara ett) och så vidare i stigande ordning av attributvärden, och när sådana element tar slut - kommer navigeringen att gå mellan de element som inte har tilldelats tabindex eller som har värdet 0.

Värdet på attributet är heltal från 1 till oändligheten. Om vissa nummer saknas - händer inget hemskt (till exempel, om nummer 2 saknas, så kommer fokus först på elementet med tabindex lika med 1, och sedan på elementet med tabindex lika med 3).

Om det på sidan i ögonblicket då tangenten Tab trycks ned finns ett element i fokus (fokus kunde ha fåtts inte bara genom att trycka på Tab, utan också genom att klicka på elementet med musen eller genom attributet autofocus), kommer nästa tryck på Tab att leda till att fokus hamnar på nästa element i ordningen efter det som för närvarande är i fokus (till exempel, om elementet med tabindex 3 för närvarande är i fokus, så kommer nästa element som får fokus att vara elementet med tabindex 4).

Om ett inmatningsfält har attributet disabled, kommer det att ignoreras vid navigering med Tab-tangenten, även om detta fält har attributet tabindex.

Attributet tabindex tillämpas på taggarna a, input, textarea, button, select, area.

Exempel

Låt oss tilldela attributet tabindex till inmatningsfälten. Tryck sekventiellt på Tab-tangenten så ser du hur inmatningsfokus går från det första inmatningsfältet till det fjärde, och sedan fortsätter till länkarna från sidans början (eftersom det inte finns fler element med tilldelat attribut tabindex):

:

Se även