Nog beschikbare karakters tonen bij een text area
Hieronder zie je een tekst-invoerveld. Daarbij staat vermeld hoeveel karakters (letters, cijfers, leestekens, …)
er nog kunnen worden ingevoerd. Dat staat leuk bij bijvoorbeeld het berichtveld in een mailformulier.
Als je wat in het veld typt verandert het aantal nog beschikbare karakters.
Op deze bladzijde staat beschreven hoe je dit aanpakt. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- Globale werking van het script
- Gebruiken in je website
- Het script werkt heel eenvoudig: Zodra een toets wordt losgelaten wordt het aantal karakters in het tekstveld bepaald. Dit wordt afgetrokken van het aantal beschikbare karakters.
- Om het in je site te gebruiken maak je een text-area op de gebruikelijke manier. De tekst 'Nog
beschikbaar: xx karakters' wordt er onder gezet. Merk op dat het aantal nog niet is ingevuld, maar
via een<span>-tag het id="Aantal" heeft gekregen. Op deze bladzijde is gebruikt:
Opmerking: De class="Opmerk-g" staat in het style-sheet van deze website en wordt alleen gebruikt om de tekst tijdelijk wat kleiner te maken.<form>
<textarea cols="25" rows="5" id="Regels" onKeyUp="Teller()"></textarea><br>
<span class="Opmerk-g">Nog beschikbaar: <span id="Aantal" class="Opmerk-g"></span> karakters</span></form>
Let ook op de non-breaking space direct na <span id="Aantal" class="Opmerk-g"></span>. - Het attributen id="Regels" moet aanwezig zijn.
- Het id mag niet worden veranderd.
- De teller wordt bijgewerkt zodra een karakter is ingetoetst (en de betreffende toets op het toetsenbord
wordt losgelaten). Dat gebeurt met de event-handler onkeyup, die de Javascript function Teller()
aanroept.
- De JavaScript function Teller() wordt in de <HEAD> geplaatst. De code ziet er als
volgt uit:<script>
function Teller() {
if (Tekstveld.value.length <= Beschikbaar)
Tel.innerHTML = Beschikbaar - Tekstveld.value.length ;
else
Tekstvak.value = Tekstvak.value.substring(0,Beschikbaar);
}
</script> - Nu moet in de tekst 'Nog beschikbaar: xx karakters' nog de beginwaarde (xx) van de teller worden ingevoegd. Dit wordt gedaan door een JavaScriptje, dat ook andere variabelen instelt zodat Teller() zijn werk kan doen.
- Het script moet in de <BODY> worden gezet, direct na de sluit-tag </form> van het formulier waar het tekstinvoer veld in staat.
De code ziet er als volgt uit:
<script> var Tekstvak = document.getElementById('Regels');
var Beschikbaar = 100;
var Tel = document.getElementById('Aantal');
Tel.innerHTML = Beschikbaar;
</script> - De tag textarea heeft geen attribuut maxLength. Je moet het dus apart instellen. Daarvoor wordt de variabele Beschikbaar gebruikt.
- In een textarea kun je ook nieuwe regels beginnen door op Enter te drukken. Dat telt als twee
karakters omdat Enter bestaat uit CR (Carriage Return) en LF (Line Feed).
- Als je dit wilt toepassen bij meerdere invoervelden op dezelfde pagina, moet je voor elk invoerveld een
aparte function Teller() maken, bijvoorbeeld Teller_1(), Teller_2(), enz.
De bijbehorende id's (Regels en Aantal) en variabelen (Tekstvak, Beschikbaar en Tel) moet je op dezelfde manier aanpassen.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>, op de plaats waar die nodig is .
De code ziet er als volgt uit:
(Zie de tekst).
Downloaden:
Druk op de knop:
File: voorb191.zip, 489 bytes.
Opmerking:
Het is ook mogelijk om dit te doen met een enkele tekst input <input type="text">. De
aanpak is daar iets anders omdat je met text input het het attribuut maxlength moet gebruiken
om het maximale aantal karakters te beperken.
Zie ook het item "Nog beschikbare karakters tonen bij een text input".
