In Formulartexten Zeichen zählen

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Ich möchte in einem Formular zur Bearbeitung von Reisetagen die Zeichenzahl der Textfelder per Javascript auslesen und unter dem jeweiligen Textfeld anzeigen und am Ende des Formulares die Gesamtsumme ausgeben lassen. Zunächst müssen natürlich die schon vorhandenen aus der Datenbank eingetragenen Zeichen gezählt und dann um die Zahl der vom Benutzer getätigten Eingaben erweitert oder verringert werden.

Hier soll die Zeichenanzahl stehen. Hier soll die Zeichenanzahl stehen. Hier soll die Zeichenazahl stehen.

Hier soll die Gesamtsumme stehen.

Kann mir da jemand helfen, vielleicht auch mit einem deutschsprachigen Link, wo ich solche Skripte finden kann.

Vielen Dank
Heiner

#2

Hier noch das grobe Formular:

<form>
<input name="Titel1">
<textarea name="Text1"></textarea>

Hier soll die Zeichenanzahl stehen.

<input name="Titel2">
<textarea name="Text2"></textarea>

Hier soll die Zeichenanzahl stehen.

<input name="Titel3">
<textarea name="Text3"></textarea>

Hier soll die Zeichenazahl stehen.

Hier soll die Gesamtsumme stehen.

</form>
#3

Hi, hier ein einfaches Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textarea, Zeichen zählen</title>
<style type="text/css">
.lengthinfo, #totallengthinfo {
background-color:#ccc;
color:#000;
font-size:80%;
display:block;
clear:both;
margin-bottom:2rem;
padding:0.4rem;
}
</style>
</head>
<form>
<div>
    <textarea class="observeta" name="Text1">Hier steht schon was</textarea>
</div>
<div>
    <textarea class="observeta" name="Text2">Hier stehen 22 Zeichen</textarea>
</div>
<div>
    <textarea class="observeta" name="Text3"></textarea>
</div>
</form>
<div id="totallengthinfo"></div>
<!-- JQUERY Framework zum leichteren Umsetzung verwendet -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
/*Funktion zur Neuberechnung aller Zeichen*/
function refreshLengthInfo() {
    //Variable zur Addierung der gesammelten Textarea Zeichenanzahl
    totall = 0;
    //Jede Textarea mit der Klasse obserceta wird durchlaufen
    $(".observeta").each(function( index, value ) {
        //die Zeichenanzahl wird in der Variable ergänzt
        totall += $(this).val().length;
        //Im Container hinter der Textarea wird der Infotext ausgetauscht
        $(this).next().html($(this).val().length +" Zeichen");
    });
    //Die Gesamtanzahl wird in den dafür vorgesehenen Container geschrieben
    $('#totallengthinfo').html(totall+" Zeichen insgesamt");
}
$(document).ready(function() {
    $(".observeta").each(function( index, value ) {
        //Hinter jede Textarea einen Platzhalter für die Zeichenanzeige hängen
        $(this).after("<div class='lengthinfo'></div>");
        //Bei Aenderungen an einer Textarea Funktion zur Neuberechnung ausführen
        $(this).on('input propertychange', function () {
            refreshLengthInfo();
        });
        //Initial Berechnung ausführen
        refreshLengthInfo();
    });
});
</script>
</body>
</html>
#4

Hallo, Netscape47Feind!

Vielen Dank für das Script. Leider komme ich erst in zwei Wochen dazu, das auszuprobieren. Ich melde mich dann, ob es funktioniert.

Viele Grüße
Heiner

#5

Hallo, Netscape47Feind!

Aus den zwei Wochen sind leider ein paar Wochen mehr geworden. Aber das Script funktioniert trotzdem immer noch. Ich habe es jetzt eingebaut.

Vielen, vielen Dank dafür, die Info hat mir sehr geholfen.

Viele Grüße
Heiner