Het probleem
Elke website heeft wel één of meer formulieren. Het zou prettig zijn als de gebruiker van de site direct kan beginnen met invullen, zodra een formulier getoond wordt.
Om dit te bereiken moet op hte moment dat het formulier getoond wordt, het juiste invoerveld direct focus krijgen. Helaas is er in HTML geen enkele manier om dit te bereiken.
Er kan wel met een tabindex per veld aangegeven worden in welke volgorde de velden focus moeten krijgen, maar het eerste veld krijgt niet vanzelf focus.
Een stukje JavaScript
Gelukkig kan dat wèl met een stukje JavaScript. Bent u niet bekend met JavaScript dan is dat geen probleem, deze tip laat us stap voor stap zien hoe dat gaat.
- Zorg dat zowel het formulier als de input velden in het formulier een name attribuut hebben.
- Voeg een onload attribuut aan de body tag van uw pagina toe.
- Schrijf het volgende JavaScript statement in het onload attribuut : "document.[formuliernaam].[veldnaam].focus()" (vervang formuliernaam en . veldnaam door de namen die bij 1. gekozen zijn).
- Klaar!
Voorbeeld Listing
Een voorbeeld van een formulier met een naam en adres veld, waarvan het naam veld automatisch focus krijgt:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulier Focus</title>
</head>
<body onload="document.formulier.naam.focus();">
<form name="formulier" action="/">
<br />Naam: <input name="naam" type="text" />
<br />Adres: <input name="adres" type="text" />
<br /><input type="submit" value="Okee" />
</form>
</body>
</html>
Hoe het werkt
Als het html document klaar is met renderen, wordt de
onload event handler van het document object aangeroepen.
Dit object heeft een array met formulieren, en elk formulier heeft weer een array met velden.
Javascript heeft een verkorte notatie voor deze arrays met .naam in plaats van rechte haken.
Elk veld heeft een
focus() method die er voor zorgt dat het veld focus krijgt als deze wordt aangeroepen.
