24 Stimmen

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.

AntwortenPositivNegativDatumStimmen
Avatar
00 Stimmen

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

AntwortenPositiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Avatar
00 Stimmen

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

Positiv Negativ
Antworten
Antworten

Über den Autor

AvatarSoftware 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

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.