Vårstäda din webbplats: Autofocus

När våren kommer passar många på att storstäda hemma. Vi delar med oss av några tips på hur du kan ge din webbplats kodbas en vårstädning genom att gno bort gammal JavaScript-kod och ersätta den med putsade, moderna standardlösningar.

Fönsterputsskrapa skrapar bort kod framför en blå himmel

Autofocus

Det är väldigt vanligt att JavaScript används för att flytta fokus till ett HTML-element när en sida laddas eller när en dialogruta öppnas. Ibland kan det vara nödvändigt, men förmodligen glömmer många att det går att använda HTMLs autofocus-attribut.

Exempelvis på autofocus för sökfält

<label for="site-search">Sök på webbplatsen</label>
<input type="search" id="site-search" autofocus>

Autofocus är inte begränsat till endast formulärfält utan kan användas på alla HTML-element. Om elementet inte är fokuserbart (saknar ett tabindex) så måste också tabindex anges.

Autofocus kan anvädas i dialog-element för att bestämma vilket element som ska få fokus när en dialogruta öppnas.

<dialog>
  <label for="name">Namn</label>
  <input type="text" id="name" autofocus>
</dialog>

Exempel på autofocus i vår CodePen-demo

Webbläsarstöd

Autofocus har haft stöd i alla webbläsare i många år och är markerat som Baseline Widely available.

Du hittar fler tips i artikelserien Vårstäda din webbplats.

Publicerad:
Andreas Nylin, porträtt

Andreas Nylin

Senior gränssnittsutvecklare och tillgänglighetsexpert