"Enter"-toets uitschakelen in een formulier-veld
Bij het invullen van formulieren op een website heb je al gauw de neiging om de "Enter"-toets
te gebruiken om naar een volgend veld te gaan. Dat geldt zeker als het gaat om een groot formulier. Helaas
wordt het formulier dan gelijk verstuurd, terwijl je nog niet klaar was met invullen.
Om dit soort problemen te omzeilen kun je natuurlijk verlangen dat tenminste een deel van het formulier is
ingevuld. Zie daarvoor bijvoorbeeld het item "Geldigheid
testen van formulier-velden".
Een ander hulpmiddel om te voorkomen dat een formulier "te vroeg" wordt verstuurd is door de "Enter"-toets uit te zetten. Eigenlijk verander je de functie ervan.
- Er worden twee items besproken:
- De globale werking van het script
- Extra attributen in de elementen van het formulier
- Het JavaScript staat in een file met de naam enterkey.js. Het script bevat één function met de naam handleEnter(). Deze function heeft twee input-parameters, namelijk field en event.
- Je roept handleEnter() altijd aan als event-handler voor de event keypress:
onkeypress = "return handleEnter(this, event)"
Dat doe je bij elk veld van het formulier waar je de enter-toets wilt uitschakelen.
Vul this in op de plaats van field om aan te geven dat het over dit veld gaat en niet over wat anders.
- De werking van het script is, zonder op details in te gaan, als volgt:
Zodra je in een veld een karakter hebt ingetypt wordt handleEnter() aangeroepen. De function kijkt welk karakter er is ingetypt: Als dat een "Enter" is (keyCode == 13), wordt de cursor in het volgende veld geplaatst. Anders wordt het ingetypte karakter getoond.
- Je kunt dit gebruiken bij alle inputs die in een formulier kunnen voorkomen, dus ook bij Checkboxes en Radiobuttons. In het laatste geval moet je de aanroep van handleEnter() opnemen in alle tags waarmee je de set radiobuttons.
- Merk op dat het geen zin heeft om handleEnter() aan re roepen bij een <TEXTAREA>. Dit omdat de "Enter"-toets binnen een <TEXTAREA> een eigen functie heeft, namelijk "ga naar de volgende regel".
Uitgewerkt voorbeeld
Gebruik:
- De code staat gedeeltelijk in de in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet deze code in de <HEAD>)
<script src="enterkey.js"></script>(Neem de volgende event-handler op in elk input-element van de de <FORM>-tag binnen de <BODY>)
onkeypress="return handleEnter(this,event)"
Downloaden:
Druk op de knop:
File: voorb103.zip, 1348 bytes.
