Tekens aftellen bij textarea of input.
Ik wil graag bij een formulier van mij dat als je begint te typen in een textarea dat je dan kunt zien hoeveel tekens je nog over hebt die je mag gebruiken...
Weet iemand hier een tutorial of een scriptje voor?
Nu werkt het alleen het getal is te zien in een input box en ik wil dat het als gewone tekst er komt te staan.
Hoe kan ik dat veranderen?
Dit is de code
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<tr>
<td>Uitleg lang(420 tekens)</td>
<td>
<textarea id="lang" name="Uitleg_Lang" rows="11" cols="40" onKeyDown="textCounter('lang','ta1count',420);" onKeyUp="textCounter('lang','ta1count',420);"></textarea>
<input id="ta1count" type="text" size="30"/>
</td>
</tr>
<script type="text/javascript">
textCounter('lang','ta1count',420);
</script>
<td>Uitleg lang(420 tekens)</td>
<td>
<textarea id="lang" name="Uitleg_Lang" rows="11" cols="40" onKeyDown="textCounter('lang','ta1count',420);" onKeyUp="textCounter('lang','ta1count',420);"></textarea>
<input id="ta1count" type="text" size="30"/>
</td>
</tr>
<script type="text/javascript">
textCounter('lang','ta1count',420);
</script>
Gewijzigd op 12/05/2011 13:29:58 door dennis meijer
ik denk dat dit wel zal werken, ander moet je de javascript hier ook even bij zetten
zal als het goed is gewoon moeten werken ipv de inputfield
@Vincent.
Hoebedoel je moet je de javascript hier ook even bij zetten?
Hij bedoelt de textCounter() functie ;-)
Dit heb ik nu dan:
Code (php)
1
2
3
2
3
<span id="ta1count"><script type="text/javascript">
textCounter('lang','ta1count',420);
</script></span>
textCounter('lang','ta1count',420);
</script></span>
Alleen dan laat die niks zien omdat de textCounter geen return geeft dus je moet hem laten zien maar hoe dat moet wee tik niet.
Gewijzigd op 12/05/2011 13:59:29 door dennis meijer
Dat is namelijk geen standaard functie van javaScript.
maar het aftellen werkt wel:P
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
function textCounter(textarea, countdown, maxlimit)
{
textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById(countdown).value = +(maxlimit-textareaid.value.length)+' tekens over';
}
</script>
function textCounter(textarea, countdown, maxlimit)
{
textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById(countdown).value = +(maxlimit-textareaid.value.length)+' tekens over';
}
</script>
Het is dus opgelost als ik goed begrijp, nu het aftellen wel goed werkt?
Alleen het aantal kon je zien in een input box... En dat wil ik niet ...
Ik wil dat het gewoon te zien is zonder dat het ergens in hoeft te staan.
Code (php)
1
2
3
4
5
2
3
4
5
<script type="text/javascript">
textCounter('lang','ta1count',420);
</script>
<span id="ta1count"> </span>
textCounter('lang','ta1count',420);
</script>
<span id="ta1count"> </span>
Werkt dit wel, en wat zegt anders de Firefox Javascript Debugger (CTRL+SHIFT+K)?
Maar kan het natuulrijk mis hebben.
Die code returnd ook niks zo te zien en die javascript debugger heb ik niet:$
Toevoeging op 12/05/2011 14:19:59:
deze fout geeft die wel in index.php zie ik via google chrome:
index.php:16Uncaught Type Error: Cannot set property 'value' of null (repeated 26 times)
en dat is deze regel..
En dan wil ik juist wel:P
countdown staat achter getElementById
Gewijzigd op 12/05/2011 14:57:56 door Maikel B
textbox gebruiken die je met css onzichtbare randen geeft, zodat je niet ziet dat het een textbox is
@johnny is er geen makkelijkere manier hiervoor?
Makkelijker? Dat is toch niet zo moeilijk? Makkelijk en zin in iets hebben is heel anders :)