So noch ein JS zum zählen und Begrenzen der Zeichen in einer Textarea
1.: Man bindet charcounter.js ins HTML document ein:
in den head:
<script type="text/javascript" langauge="javascript" src="charcounter.js"></script>2.: und dann muss IN den <textarea>-Tag folgendes rein:
onkeyup="countchar('textbox', 200, 'kontakt', 'fehler-alert');" onkeydown="countchar('textbox', 200, 'kontakt');"hier steht das 'textbox' für die ID der Textarea, also nich vergessen, der eine zu geben.
Das 200 steht für die Maximale Anzahl an zu verwendenden Zeichen, das Bitte Eidtieren.
Das 'kontakt' steht für den Namen des Formulars, auch hier bitte editieren.
Das 'fehler-alert' steht für die ID des Divs, der auftaucht, wenn die 200 Zeichen überschritten wurden. Dazu in 6..
3.: Um die zu verbleibenden Zeichen auszugeben, brauchen wir noch ein <input>-Tag:
<input type="text" name="left" id="left" value="200" onfocus="ausgval=value;" onblur="value=ausgval;">Bitte in diesem Code NICHTS verändern.
4.: Und um das ganze noch schön zu bekommen, muss in den Head oder in das Stylesheet folgendes:
Head:
<style type="text/css">
#left {
border: none;
background: white;
width: 2em;
}
</style>
ins stylesheet:
#left {
border: none;
background: white;
width: 2em;
}5.: um noch die sicherheit zu erhöhen, bekommt das ganze kein <input type="submit"> sondern einen Button mit JS:
<input type="button" value="Senden" onclick="this.submit()">jedoch ist es besser, immer noch PHP dahinter zu haben. Mit JS geht es lediglich eleganter.
6.: Nun brauchen wir nurnoch eine Fehlermeldung für den Fall, dass die Maximalen zeichen überschritten werden.
Dazu habe ich hier etwas parat, das kann aber noch geändert werden. Auf jeden Fall muss dazu in das oben angelegte Stylesheet oder Head-Style-Element noch folgendes:
#fehler-alert {
border: 1px solid #000000;
background: #FFFFFF;
width: 350px;
height: 80px;
position: absolute;
top: 300px;
left: 200px;
display: none;
}und in den HTML-Code muss dann folgendes:
<div id="fehler-alert">
<center>
<a>Es dürfen nur 200 Zeichen verwendet werden.</a>
<br>
<!-- bitte den code in den Kommentaren NICHT ändern, danke -->
<input type="button" value="OK" onclick="global_alertt.style.display='none';">
<!-- Nicht-änder-Zone Ende -->
</center>
</div>Hier noch ein Demo-Link.
Viel Spass!
Auch hier bitte ich um Feedback!
