jQuery: Zeichen mehrerer Input-Felder zählen
Tipp von Stefan Trost | 18.01.2013 um 23:32
In diesem Tipp zeige ich euch, wie ihr die verwendeten Zeichen aus mehreren Input-Feldern mit jQuery zählen, ausgeben und aktuell halten könnt.
Die HTML Seite
Dies sind die Eingabefelder und das Feld für die Ausgabe des Ergebnisses auf unserer HTML-Seite:
<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 wollen die Klasse "count" zu. Dies sind in dem Beispiel die Felder "a", "b" und "c". Das Feld "d" wird später nicht gezählt, da wir diesem Feld nicht die Klasse zuweisen.
Die Ausgabe der verwendeten Zeichen soll später im Bereich "countdisplay" erscheinen. Diesem Bereich haben wir die ID "countdisplay" zugewiesen, damit wir den Wert einfach ändern können.
Der JavaScript/jQuery Code
Kommen wir nun zu unserem JavaScript/jQuery-Code:
$(document).ready(function() {
$(".count").keyup(function() {
var c = 0;
$.each($(".count"), function() {
c += $(this).val().length;
});
$("#countdisplay").text(c);
});
});
Mit $(".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 die 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 Felder mit der Klasse "count" durch und bestimmen mit .val().length die Länge deren Inhalts. Das Ergebnis summieren wir in der Variable "c".
Zuletzt setzen wir den Inhalt von "countdisplay" auf "c", so dass die Anzahl der Zeichen dort angezeigt wird.
Ü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
jQuery: Formularfelder mit eckigen Klammern (zum Beispiel namen[]) mit jQuery auswählen
Frage | 1 Antwort
PHP: Formular-Eingaben als Array an PHP Skript schicken
Tipp | 0 Kommentare
LibreOffice/OpenOffice Calc: Felder zählen mit einem Wert größer X
Frage | 1 Antwort
jQuery Mobile: Style für dynamisch generierten Content
Frage | 1 Antwort
Textarea Maxlength: Maximale Zeichenanzahl in HTML Textarea begrenzen
Tutorial | 4 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