De focus van een HTML-element wijzigen

Een webpagina bestaat uit tekst en tags. Alles wat geen "Kale Tekst" is, is een tag. Plaatjes, Formulieren, Hyperlinks, enz. zijn tags.

Met tags kun je elementen op je pagina zetten die een actie kunnen uitvoeren: Met een <button> kun je een JavaScript function starten, met een <a> maak je een hyperlink, enz.
Dit soort elementen heeft twee "toestanden": Actief en Inactief.

Als een element actief is wordt gezegd dat het de focus heeft. Een element dat niet actief is heet blurred.
In een formulierveld dat de focus heeft is een tekstcursor zichtbaar. Om een groep radiobuttons die de focus heeft zie je vaak een stippellijn. Een <a>-tag die de focus heeft verandert (soms) even van kleur.

Gewoonlijk heb je niets te maken met de focus van een element. Als je op een tekstveld in een formulier klikt krijgt dat veld de focus zodat je er wat in kunt typen. De rest wordt automatisch blurred. Als je op een hyperlink klikt krijgt deze de focus en zal de betreffende pagina worden opgehaald.
Er zijn situaties denkbaar waarbij het handig is om zelf de focus aan te passen. Dat is bijvoorbeeld bij een formulier waarin verkeerde informatie is gegeven. Dat blijkt pas na het versturen van het formulier, als het JavaScript er mee aan de slag gaat. In zo'n geval is het voor de bezoeker prettig als het betreffende veld meteen de focus krijgt zodat hij/zij niet het eerst het veld hoeft op te zoeken om de fout te corrigeren.

De toepasbaarheid van deze techniek is maar heel beperkt. Zinvolle toepassingen zijn alleen te bedenken voor tekstvelden in formulieren, bijvoorbeeld als verplichte gegevens niet zijn ingevuld.

• De voorbeelden komen moeilijk uit de verf. Dat komt door de manier waarop browsers omgaan met focus. In de meeste browsers verliest een element de focus zodra de bijbehorende actie is gestart, bijvoorbeeld:
  
  • Een hyperlink houdt de "active color" zolang de muisknop is ingedrukt en zolang de browser bezig is met het laden van de opgeroepen pagina.
   
• Er worden twee items besproken:
  1. Functions voor het wijzigen van de focus
  2. Focus wijzigen van een hyperlink of formulier element
   
• Als je zelf de focus van een element wilt veranderen is het nodig dat het betreffende element een id heeft, zodat het met JavaScript kan worden aangesproken. Hiervoor gebruik je getElementById().
• Een element krijgt de focus door aanroep van de function focus().
  Na aanroep van de de function blur() verliest het element de focus weer.
• Voor een hyperlink betekent dit dat de "Active Color" (op deze website groen) wordt aangezet (focus) of wordt uitgezet (blur). Onder de knop zit een voorbeeldje met de bijbehorende code.
   
  Voorbeeld met <a>-tag
  
  
  Met dank aan W3Schools.
   
• De aanpak voor een formulier-element is precies hetzelfde als voor een hyperlink. Met onderstaande knop krijg een voorbeeld te zien.
   
  Voorbeeld met formulier-elementen
  
  
• Wijzigen van de focus van een element is alleen mogelijk als de functions focus() en blur() voor dat element zijn gedefinieerd. Dat is alleen voor <A>-tags en formulier elementen. Focus naar een paragraaf halen kan dus niet.
  Wel is het mogelijk om het tekstfont te veranderen als je er met de muis overheen gaat. Dat moet je echter zelf programmeren. De aanpak daarvoor vind je in het item Lettergrootte en -opmaak wijzigen.
   
• Behalve sommige HTML-elementen kunnen windows ook focus hebben, krijgen en kwijtraken. De aanpak daarvoor staat beschreven in het item Window openen/sluiten vanuit een ander window.

Opmerking:
 
Testen of (verplichte) gegevens in een invoerveld zijn ingevuld kun je doen met het script formcheck.js dat is beschreven in het item "Geldigheid testen van formulier-velden".