Invoerveld met geanimeerde placeholder II

Hieronder zie je een formuliertje, waar je iets kunt invullen. Er is een placeholder, waarvan de tekst steeds verandert.
Merk op dat het formulier niet kan worden verzonden. Dat valt buiten het bestek van het voorbeeld.
Op deze pagina wordt uitgelegd hoe je dit maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door de site woordenlijst.org, waar dit op staat. Voor deze site heb ik iets nagebouwd wat er op lijkt.
• De code van het voorbeeld bestaat uit HTML, CSS (in de filestyles.css) en JavaScript (in de file script.js).
   
• De werking van het script
• Zodra de pagina is geladen, wordt de JavaScript-function initPlaceholder() gestart. Deze maakt een refentie naar de id van het invoerveld. In het voorbeeld is dat uwData. Verder wordt een aantal zaken klaargezet om de animatie te kunnen starten, waaronder de placeholder.
• Er zijn twee teksten: ’?’ voor één onbekend teken en ’*’ voor meer onbekende tekens. Het woord "Gebruik" doet niet mee in de animatie.
• De animatie start door aanroep van de function karaktersToevoegen(). Dat gebeurt elke 0.1 seconde. Steeds wordt één karakter aan de placeholder toegevoegd. Als de eerste tekst helemaal klaar is, wordt de placeholder letter voor letter korter gemaakt.
• Vervolgens wordt de tweede tekst letter voor letter toegevoegd, waarna die weer letter voor letter verdwijnt.
• Enzovoort.
   
• HTML
• De HTML van het voorbeeld bestaat uit é:én enkele <div>tag met de klasse voorbeeld. Deze dient voor de positionering in het document en voor de opmaak.
• Binnen voorbeeld bevindt zich é:én <input type="text">-tag met een lege placeholder. Voor de communicatie met JavaScript is er id="uwData".
   
• CSS
• De klasse voorbeeld maakt het formuliertje en centreert dat in de regel. Het stelt de afmetingen en de lettergrootte in en maakt de rand en de verlopende achtergrond
• De input wordt binnen voorbeeld absoluut gepositioneerd. De afmetingen, de rand, de lettergrootte en de achtergrond van het invoerveld worden ingesteld.
   
• JavaScript
• Het script begint met de declaratie van drie constanten: str0, str1 en str2. str0 bevat het constante deel van de placeholder. str1 en str2 worden geanimeerd. Om te zorgen dat de complete tekst even zichtbaar blijft, zijn aan str1 en str2 elk twee spaties toegevoegd.
• Vervolgens wordt een zestal hulpvariabelen gedeclareerd en wordt er met addEventListener voor gezorgd dat de function initPlaceholder() wordt gestart zodra de pagina is geladen.
• initPlaceholder() stelt de volgende variabelen in:
  • xx bevat een verwijzing naar het invoerveld, in het voorbeeld is dat id="uwData".
  • De placeholder krijgt de waarde van str0.
  • activeString krijgt de waarde van str1. activeString wordt gedurende het proces steeds korter.
  • activeLength bevat de lengte van activeString. Ook deze verandert tijdens het proces.
  • bezigMet wordt op 1 gezet. Deze variabele heeft de waarde 1 of 2, wat aangeeft aan of er met str1 of met str2 wordt gewerkt.
  • toevoegen krijgt de waarde 0. Het geeft aan welk karakter uit str1 of str2 aan de placeholder moet worden toegevoegd, of (gerekend van achteren) uit de placeholder moet worden verwijderd.
  • Tenslotte wordt, met een interval van 0.1 sec., de function karaktersToevoegen() gestart.
   
• karaktersToevoegen() voegt bij elke aanroep een karakter uit activeString toe aan de placeholder. Zodra activeString geheel aan de placeholder is toegevoegd, wordt de herhaalde aanroep van karaktersToevoegen() gestopt. In plaats daarvan wordt, met een interval van 0.1 sec., de function karaktersVerwijderen() gestart.
   
• karaktersVerwijderen() verwijdert bij elke aanroep een karakter aan het einde van de placeholder-tekst. Dat gebeurt door activeString met één karakter te verkorten en die samen met str0 in de placeholder te zetten.
  Zodra activeString geheel uit de placeholder is verwijderd, wordt de herhaalde aanroep van karaktersVerwijderen() gestopt. Vervolgens wordt aan de hand van bezigMet gekeken welke van de twee strings is afgehandeld. De "andere" string wordt in activeString gezet en bezigMet wordt aangepast.
  Tenslotte wordt, met een interval van 0.1 sec., de function karaktersToevoegen() gestart.
   
• Het script stopt niet als er gegevens in het invoerveld worden gezet. De placeholder wordt wel onzichtbaar, zoals het hoort.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Pas de tekst van str0, str1 en str2 (in script.js) aan voor je eigen toepassing. Aan het eind van str0 moet een spatie staan. Aan het eind van str1 en str2 moeten dat er twee zijn.
• Pas de breedte van voorbeeld en input (in styles.css) aan, zodat de placeholder er ruim in past. Merk op dat de font-size, de line-height en de padding hiebij ook een rol spelen.
• Verander kleuren, dikte van randen, enz.
   
• Tenslotte...
• Dit is het meest geschikt voor kleine formulieren, bijvoorbeeld een zoekveld met één knop.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar het invoerveld moet verschijnen).

div class="voorbeeld">
  Vul iets in....
  <input type="text" id="uwData" placeholder="">
</div>

Downloaden:
 
Druk op de knop:  File: voorb788.zip, 1367 bytes.