Nog beschikbare karakters tonen bij een text input
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-input 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>
<input type="text" id="Regel" size="30" maxlength="20" onKeyUp="Teller()"><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>. - De attributen id="Regel" en maxlength moeten aanwezig zijn.
- Het id mag niet worden veranderd.
- De waarde van maxlength mag je vrij kiezen. Hier is deze 20.
- De waarde van size bepaalt de breedte van het veld op je scherm. Gebruik van dit attribuut wordt aanbevolen maar is niet verplicht. Op deze bladzijde is 30 gebruikt.
- 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 ;
}
</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 Tekstveld = document.getElementById('Regel');
var Beschikbaar = Tekstveld.maxLength;
var Tel = document.getElementById('Aantal');
Tel.innerHTML = Beschikbaar;
</script> - 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 (Regel en Aantal) en variabelen (Tekstveld, 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: voorb185.zip, 492 bytes.
Opmerking:
Het is ook mogelijk om dit te doen met een tekstvak <textarea>. De aanpak is daar iets anders omdat
textarea een onbeperkt aantal karakters kan bevatten. Het attribuut maxlength is daar niet beschikbaar.
Je moet de beperkingen in het aantal karakters dan ook zelf aanbrengen. Zie ook het item "Nog beschikbare karakters tonen bij een text area".
