Site index
Portals
Artikelen
Software
Links
ContactTextarea limiet
1 bericht
• Pagina 1 van 1
Textarea limiet
door Theo » 09 Sep 2008 20:44
Inleiding
Dit artikel sluit een aan bij het artikel form validatie. Dit script zorgt er namelijk voor dat je in een textarea een maximum aantal tekens kan typen. Tevens laten we de gebruiker weten hoeveel tekens hij/zij nog over heeft.
Het script
Het script bestaat uit twee gedeelten. Het eerste gedeelte is de javascript code die al het werk doet. Plaats onderstaande code tussen<head> en </head> of maak er een extern javascript bestand van en importeer hem.
Javascript
Vervolgens hebben we twee dingen nodig. Namelijk een formulier mettextarea , waar we het op toepassen. En we hebben iets nodig waar we het aantal overige tekens weer kunnen geven. Daarvoor gebruiken we volgende code, die we in de <body> plaatsen:
HTML
Werking
Je hebt nu het script gezien, maar je wilt er natuurlijk ook wat van leren! Je vraagt je misschien af hoe het script werkt. Dat ga ik je nu uitleggen.
Detextarea heeft een onkeydown en een onkeyup event. Dat betekent dat zodra er getypt wordt in de textarea de functie limiet() aangeroepen wordt. Deze hebben we drie waarden gegeven. De eerste waarde is this , dat betekend dat de functie op dat element (dus de textarea) van toepassing is.
Als tweede geven we aan wat het maximum aantal tekens mag zijn. Zorg ervoor dat deze in zowelonkeydown , onkeyup als in de span gelijk is. Tenslotte hebben we 'aantal'. Dat is het id van de span waarin we de teller hebben gezet.
Zoals ik al aangaf wordtlimiet() uitgevoerd zodra men begint te typen. Maar wat doet limiet() ? Deze vergelijkt de tweede waarde (maximum) met het aantal tekens binnen de textarea . Overschrijdt men deze waarde dat wordt er één teken weggehaald uit de textarea. Zo niet, dan wordt de tekst in de span aangepast.
Gebruik
Je kan binnen je document zovaak de functie limiet() aanroepen als je wilt. Maar zorg er voor dat de span (de teller) elke keer een ander id heeft. Let daarbij ook op dat je dit goed aangeeft in deonkeyup en onkeydown event.
Voorbeeld
Een werkend voorbeeld van de textarea limiet vind je hier.
Dit artikel sluit een aan bij het artikel form validatie. Dit script zorgt er namelijk voor dat je in een textarea een maximum aantal tekens kan typen. Tevens laten we de gebruiker weten hoeveel tekens hij/zij nog over heeft.
Het script
Het script bestaat uit twee gedeelten. Het eerste gedeelte is de javascript code die al het werk doet. Plaats onderstaande code tussen
Javascript
- Code: Alles selecteren
<script type="text/javascript">
/***************************************
* Textarea limiet
* http://www.Mastercode.nl
* Door: Ted [theo[A]mastercode[P]nl
***************************************/
function limiet(veld, maximum, telveld)
{
if (veld.value.length > maximum)
veld.value = veld.value.substring(0, maximum);
else
document.getElementById(telveld).firstChild.nodeValue = (maximum - veld.value.length);
}
</script>
Vervolgens hebben we twee dingen nodig. Namelijk een formulier met
HTML
- Code: Alles selecteren
<form name="formulier" action="pagina.html" method="post">
<textarea name="bericht" onkeydown="limiet(this,30,'aantal');" onkeyup="limiet(this,30,'aantal');"></textarea>
</form>
<p>U heeft nog <span id="aantal">30</span> karakters over.</p>
Werking
Je hebt nu het script gezien, maar je wilt er natuurlijk ook wat van leren! Je vraagt je misschien af hoe het script werkt. Dat ga ik je nu uitleggen.
De
Als tweede geven we aan wat het maximum aantal tekens mag zijn. Zorg ervoor dat deze in zowel
Zoals ik al aangaf wordt
Gebruik
Je kan binnen je document zovaak de functie limiet() aanroepen als je wilt. Maar zorg er voor dat de span (de teller) elke keer een ander id heeft. Let daarbij ook op dat je dit goed aangeeft in de
Voorbeeld
Een werkend voorbeeld van de textarea limiet vind je hier.
- Theo
- Oprichter
- Berichten: 1795
- Geregistreerd: 11 Jun 2005 17:43
- Woonplaats: in_array()
1 bericht
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast