14. September 2008 um 23:12 Uhr von Daniel · Trackback-URL
Mit dem folgenden Script kann man live während der Eingabe per JavaScript die Zeichen in einer oder mehreren Textarea-Feldern zählen und darstellen.
Die JavaScript-Funktion sieht folgendermaßen aus :
function textcounter( field, count_field, max_limit ) { if( field.value.length > max_limit ) { // Inhalt zu lang -> Inhalt beschneiden field.value = field.value.substring(0, max_limit); } else { // Laenge des Inhalts korrekt -> "Zeichen verbleibend" aktualisieren count_field.value = max_limit - field.value.length; } }
Das HTML muss sich dann an diese Form halten.
<form name="formular" action="javascript:;" method="post">
<fieldset>
<strong>Funktion zum zählen und beschränken von mehreren Textareas auf einer Seite</strong><br/>
<textarea name="textarea_1" cols="28" rows="5" onkeydown="textcounter(document.formular.textarea_1, document.formular.verbleibende_zeichen_1, 150)" onkeyup="textcounter(document.formular.textarea_1, document.formular.verbleibende_zeichen_1, 150)"></textarea>
<br/>
<input type="text" name="verbleibende_zeichen_1" size="3" maxlength="3" value="150" readonly="readonly"/> Zeichen verbleibend<br/>
<br/>
<textarea name="textarea_2" cols="28" rows="5" onkeydown="textcounter(document.formular.textarea_2, document.formular.verbleibende_zeichen_2, 150)" onkeyup="textcounter(document.formular.textarea_2, document.formular.verbleibende_zeichen_2, 150)"></textarea>
<br/>
<input type="text" name="verbleibende_zeichen_2" size="3" maxlength="3" value="150" readonly="readonly"/> Zeichen verbleibend<br/>
<br/>
<input type="submit" name="submit" value="Abschicken"/>
</fieldset>
</form>Und so sieht das ganze dann aus: Demo.
Salü,
wenn man onkeyup verwendet ist es etwas sicherer, denn bei onkey down könnte man z.b. tricksen wenn man einfach über die gesamt-zahl auf der taste bleibt!
Der Artikel ist mit den folgenden Schlagworten versehen:
Counter, JavaScript, Textarea, Zeichen zählen
Es gibt derzeit 1 Kommentar zu diesem Eintrag. Wenn Du dazu auch etwas sagen möchtest, dann gib Deinen Senf hier ab.
Du kannst Dir auch die Antworten auf diesen Beitrag als RSS-Feed abonnieren.