Ben's Hobbyhoekje -- Merkwaardige invoervelden

Merkwaardige invoervelden

Om gegevens te vragen van je bezoekers kun je een formulier gebruiken. Hieronder staat zo'n formulier voor het opvragen van Naam- en Adresgegevens. Met dit formulier is echter wat merkwaardigs aan de hand. Dat merk je onmiddellijk als je het gaat invullen...

Als je dit op een website tegenkomt, voel je jezelf behoorlijk in de maling genomen. Maar dat is nou precies de bedoeling...

Op deze bladzijde wordt getoond hoe je dit kunt aanpakken. De code staat onderaan deze pagina. Je kunt hem ook downloaden om zelf te gebruiken (als je dat zou willen ...).

Er worden twee items besproken:
1. Het formulier.
2. De werking en het gebruik van het bijbehorende JavaScript.
Het formulier is "gewone" HTML en bevat alleen tekst-velden: <INPUT type="text">, een submit-knop en een reset-knop.
Voor de opmaak van het formulier is een tabel gebruikt.
Meer informatie over het opzetten van een formulier als dit is te vinden in het item "Tekst-invoer" in de rubriek "Formulieren", elders op deze site.
Het formulier heeft de attributen action="JavaScript: alert('Demo\nNiet verzonden');" method="post" name="Vreemd".
Als je op de knop Verstuur klikt verschijnt er een alert. Verder gebeurt er niets.
Elk tekstveld heeft behalve het attribuut type="text" ook de attributen class, size en name.
Het eerste tekstveld heeft name="Textfield0". Het tweede tekstveld heeft name="Textfield1". Het derde veld heeft name="Textfield2", enzovoort. De nummering moet beginnen bij 0, moet opeenvolgend zijn en mag geen gaten hebben.
Het aantal tekstvelden geef je aan in de variabele NoOfFields. Die staat in het JavaScrip in de <HEAD> van de bladzijde.
Behalve een name-attribuut hebben alle elementen van het formulier ook een ID-attribuut. De name en het ID zijn gelijk aan elkaar. Dit is nodig om de JavaScript-function getElementById te kunnen gebruiken.
Als een tekstveld de focus krijgt wordt de JavaScript function GetTargetField(n) aangeroepen via de event-handler onfocus. De parameter n van GetTargetField(n) is gelijk aan het volgnummer van het tekstveld. Dus als het ID van het veld gelijk is aan Textfield0, is n gelijk aan 0.
De function GetTargetField() zorgt er voor dat het betreffende tekstveld wordt leeggemaakt. Tevens wordt willekeurig een ander tekstveld gekozen waar de ingetypte karakters naartoe worden gestuurd.
Als een karakter wordt ingetypt, wordt dat heel even getoond in het tekstveld. Zodra de toets wordt losgelaten wordt dat karakter naar het tekstveld gestuurd dat is bepaald met GetTargetField(). Verantwoordelijk hiervoor is de JavaScript function ChangeTargetField(), die wordt aangeroepen via de event-handler onkeyup.
Merk op dat het onmogelijk is om alle velden van het formulier ingevuld te krijgen. Het is mogelijk dat de informatie die in "Naam" en "Adres" is ingevoerd, allebei naar bijvoorbeeld "Woonplaats" wordt gestuurd.
Behalve de variabele NoOfFields (zie hierboven) hoeft er aan het JavaScript niets te worden gewijzigd.

Gebruik:

De code staat in de <HEAD> en in de <Body> op de plaats waar die nodig is.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).
Merk op dat elke JavaScript-opdracht op één regel hoort te staan. In deze weergave is dat niet mogelijk.

<script>
// Formulier dat zich niet weet te gedragen
// (c) 2004 Ben's Hobbyhoekje.
// De auteur neemt geen verantwoordelijkheid voor gevolgen van gebruik van dit script.
// Bij toepassing van dit script stemt u hier mee in.
// Dit script mag vrij worden gebruikt mits dit commentaar intact blijft.

var NoOfFields= 4; // Aantal velden dat zich misdraagt
var fieldSourceId ='', fieldTargetId ='', fieldContent;
var DOM = document.getElementById ? true : false;

function GetTargetField(n) { // Onthoud welk veld de focus heeft en bepaal welk veld de focus krijgt
if (DOM) {
fieldSourceId = 'Textfield' + n;
fieldTargetId = fieldSourceId;
while (fieldTargetId == fieldSourceId) { // Kies een veld waar de uitvoer heen gaat
fieldTargetId = 'Textfield' + Math.floor(Math.random()*NoOfFields);
}
document.getElementById(fieldSourceId).value=''; // Maak het bronveld leeg
}
}

function ChangeTargetField() {
if (DOM) {
fieldContent = document.getElementById(fieldSourceId).value; // Wat is er ingetypt?
document.getElementById(fieldTargetId).value += fieldContent; // Zet dat erbij in het 'andere' veld
document.getElementById(fieldSourceId).value = ''; // Maak het bronveld leeg
}
}
</script>

(Zet dit in de <BODY>, op de plaats waar het formulier moet komen).
Merk op dat er op sommige plaatsen wordt overgegaan op een nieuwe regel terwijl dat niet zou moeten. In deze weergave kan dat niet worden voorkomen.

<form action="JavaScript: alert('Demo\nNiet verzonden');" method="post" name="Vreemd" id="Vreemd">
<table border="1" cellpadding="6" cellspacing="0" bgcolor="#FFFFD8" frame="box" rules="none" align="center"><tr>
<td align="right" class="MailR">Naam:</td>
<td><input type="text" name="Textfield0" id="Textfield0" size="35" class="MailB" onFocus="GetTargetField(0)" onKeyUp="ChangeTargetField()"></td>
</tr><tr>
<td align="right" class="MailR">Adres:</td>
<td><input name="Textfield1" id="Textfield1" type="text" size="35" class="MailB" onFocus="GetTargetField(1)" onKeyUp="ChangeTargetField()"></td>
</tr><tr>
<td align="right" class="MailR">PC Woonplaats:</td>
<td><input name="Textfield2" id="Textfield2" type="text" size="6" class="MailB" onFocus="GetTargetField(2)" onKeyUp="ChangeTargetField()"> 
<input name="Textfield3" id="Textfield3" type="text" size="25" class="MailB" onFocus="GetTargetField(3)" onKeyUp="ChangeTargetField()"></td>
</tr><tr>
<td colspan="2" align="center"><input type="submit" name="Verstuur" id="Verstuur" value="Verstuur" class="MailK">   
<input type="reset" name="Overnieuw" id="Overnieuw" value="Overnieuw" class="MailK"></td>
</tr></table>
</form>

Downloaden:

Druk op de knop: File: voorb134.zip, 1356 bytes.

Opmerking:

In de HTML-code wordt ook het attribuut class toegepast. Dit zijn STYLE-classes die dienen om het formulier wat op te leuken. Ze stellen de kleur van de letters in het formulier in. De code van deze classes wordt hier niet genoemd, maar zit erbij in de downloadfile.

Naam:
Adres:
PC Woonplaats: