jQuery: Zeichen mehrerer Input-Felder zählen
Tipp von Stefan Trost | Letztes Update am 12.04.2022 | Erstellt am 18.01.2013
In diesem Tipp zeige ich euch, wie ihr die Zeichen aus mehreren Input-Feldern mit jQuery zählen, ausgeben und aktuell halten könnt.
Die HTML Seite
Auf unserer HTML-Seite befinden sich 4 verschiedene Felder des Typs Input mit den Namen "a", "b", "c" und "d". Außerdem haben wir darunter einen Text platziert, mit dem die aktuelle Anzahl der verwendeten Zeichen ausgegeben werden soll.
<input name="a" value="" class="count"> <input name="b" value="" class="count"> <input name="c" value="" class="count"> <input name="d" value=""> <p>Verwendete Zeichen: <span id="countdisplay">0</span></p>
Wichtig: Wir weisen allen Feldern, deren Zeichen wir zählen möchten, die Klasse "count" zu. Dies sind in dem Beispiel die Felder "a", "b" und "c". Das Feld mit dem Namen "d" möchten wir von der Zählung ausschließen. Aus diesem Grund haben wir diesem Feld die Klasse "count" nicht zugewiesen.
Die Ausgabe der verwendeten Zeichen soll später im Span-Bereich "countdisplay" hinter dem Text "Verwendete Zeichen:" erscheinen. Diesem Bereich haben wir die ID "countdisplay" zugewiesen, damit wir den Bereich einfach ansprechen können, um den Wert zu ändern. In unserem HTML-Quelltext haben wir den Wert auf 0 gesetzt, da auch alle unsere Felder keinen Inhalt haben (value=""). Wenn wir die Input-Felder mit Anfangswerten belegen, können wir diese Zahl natürlich anpassen .
Der JavaScript/jQuery Code
Kommen wir nun zu unserem JavaScript beziehungsweise jQuery-Code:
$(document).ready(function() {
$(".count").keyup(function() {
var c = 0;
$.each($(".count"), function() {
c += $(this).val().length;
});
$("#countdisplay").text(c);
});
});
Mit dem Selektor $(".count") wählen wir alle Felder mit der Klasse "count" aus, also die Felder, die ausgezählt werden sollen. Dem keyup-Event dieser Felder weisen wir dann unsere Funktion zum Auszählen der Felder und zum Anzeigen des Ergebnisses zu.
Dazu setzen wir unsere Zählvariable "c" zunächst auf 0. Anschließend gehen wir mit $.each() einmal alle gefundenen Felder mit der Klasse "count" durch und bestimmen innerhalb der Schleife mit .val().length die Länge deren Inhalts. Das Ergebnis summieren wir für jedes Feld in der Variable "c".
Zuletzt setzen wir den Inhalt (inneren Text) von "countdisplay" mit der Hilfe von .text() auf "c", so dass die ermittelte Anzahl der Zeichen dort angezeigt wird. Wenn wir die Input-Felder mit Anfangswerten belegt haben, können wir die Zählfunktion auch einmal direkt nach dem Laden der Seite aufrufen, um den aktuellen Wert zu ermitteln.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
PHP: Formular-Eingaben als Array an PHP Skript schicken
Tipp | 0 Kommentare
HTML-Formular mit Daten vorbelegen
Tutorial | 0 Kommentare
PHP: Nur bestimmte Buchstaben, Zahlen und Zeichen in einem String zulassen
Tipp | 10 Kommentare
JavaScript: Submit einer Form abfangen
Tutorial | 0 Kommentare
jQuery: Hinweis beim Verlassen der Seite wenn ein Formular noch nicht abgeschickt wurde
Tutorial | 1 Kommentar
Textarea Maxlength: Maximale Zeichenanzahl in HTML Textarea begrenzen
Tutorial | 4 Kommentare
jQuery: Alle Checkboxen markieren (Select/Unselect All)
Tipp | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Ich habe ein Formular das in jedem Eingabefeld eine andere Maximallänge hat. Ich könnte es mit count1, count2, usw benennen aber das Problem sind die Sonderzeichen, die werden anders gezählt.
Ich habe das hier gefunden
sonderzeichen = val.match(/[^a-z A-Z0-9]/g); //Buchstaben und Zahlen sind keine "Sonderzeichen" if (sonderzeichen) { anz -= sonderzeichen.length; anz += (sonderzeichen.length * 6); }aber weiss nicht wie ich das einsetzen soll.
Kannst du mir bitte helfen.
LG Thomas
26.12.2020 um 15:10
Was meinst du denn mit "die werden anders gezählt"?
Wie "anders" sollen die Zeichen denn gezählt werden?
Und was soll dieses Code-Beispiel bewirken?
26.12.2020 um 15:25
Die Umlaute werden in der Datenbank doppelt gezählt.
z.B: Wörterzähler 14 Zeichen und im Formular eingetragen Wörterzähler 12 Zeichen
Also sprich wenn ich Maximallänge von 12 Zeichen eingetragen hätte dann würde beim Wort Wörterzähler die Fehlermeldung "Nicht 12 Zeichen überschreiten" kommen
Der Code soll in meinem Fall bewirken dass die Umlaute doppelt gezählt werden.
26.12.2020 um 16:06
Also wenn ich dich richtig verstehe: Du prüfst mit JavaScript die Anzahl der Zeichen in deinem Formularfeld. Hier bekommst du die richtige Anzahl der Zeichen zurück.
Das Problem ist der Eintrag in die Datenbank, wo du mehr Bytes als Zeichen brauchst, damit passt die JavaScript-Zählung nicht mehr und es werden beim Eintrag hinten Zeichen abgeschnitten. Ist das soweit richtig?
Der Grund dafür ist, dass deine Datenbank vermutlich UTF-8 als Kodierung verwendet. In UTF-8 brauchen Zeichen wie A-Z ein Byte, Ä, Ö, Ü allerdings zwei Byte und es gibt andere Zeichen, die noch mehr Bytes verbrauchen. Mehr dazu hier.
Du müsstest also in JavaScript nicht die tatsächliche Anzahl der Zeichen bestimmen sondern wie viel Byte die UTF-8 Darstellung benötigt. Das machst du zum Beispiel mit:
var laenge = (new TextEncoder().encode('ä')).length;Hier erhälst du als Ergebnis für 'ä' 2 und für 'a' 1, für 'Wörterzähler' entsprechend 14.
26.12.2020 um 16:20
Java ist nicht so meine Stätke, wie würde der obere Code aussehen müssen um die Umlaute (ü,ö,ä,ß,Ü,Ö,Ä) als zwei Zeichen zu zählen?
LG Thomas
26.12.2020 um 16:33
Java ist das auch gar nicht, wir arbeiten hier mit JavaScript.
Den Code mit dem "sonderzeichen = val.match..." brauchst du nicht mehr, das bringt dich nicht weiter. Nimm meine Zeile mit dem TextEncoder, der gibt dir die Länge der Bytes zurück, die du für die Datenbank für den betreffenden Text benötigen wirst.
26.12.2020 um 16:37
Und wie und wo füge ich den hier ein?
$(document).ready(function() { $(".count").keyup(function() { var c = 0; $.each($(".count"), function() { c += $(this).val().length; }); $("#countdisplay").text(c); }); });26.12.2020 um 16:49
Das geht jetzt so langsam hier über das eigentliche Thema hinaus. Was du brauchst ist ein Programmierer, wenn du das nicht selber zusammen kopieren kannst. Du kannst dich gerne bei mir unter sttmedia.de/kontakt melden, hier soll es ja der Allgemeinheit helfen und nicht um individuelle Projekte.
26.12.2020 um 17:03
Oh entschuldigung ich dachte so eine Erweiterung würde auch der Allgemeinheit nutzen, aber was weiß ich schon!
Danke für den Tipp, ich werde mir jetzt einen Programmierer suchen müssen.
26.12.2020 um 17:55