Restliche Zeichen in Textfeld anzeigen

Guten Tag,
Ich habe die Joomla Subscription für Joomla 4/5 installiert auf Joomla 5.1.x

Ich möchte gerne die restlichen einzugebenden Zeichen in einem Textfeld bzw. Textarea oberhalb des Formularfedes anzeigen.
Vor der Eingabe 0/400
Während der Eingabe z.B. noch 123/400 übrig

Wie kann ich dies Darstellen? Die Suche im Forum brachte keine Ergebnisse

Viele Grüße und Danke für Infos.


 

Hallo vrelling,

diese Möglichkeit gibt es in Visforms leider nicht als eine einfache Konfiguration.

Du kannst das Verhalten mit etwas eigenem CSS/JavaScript und den Visforms 'Frontend Webassets' erreichen.
Frontend Webassets:
docs.joomla-4.visforms.vi-solutions.de/d...-frontend-webassets/
Alle Einstellungen werden im Formular vorgenommen:
docs.joomla-4.visforms.vi-solutions.de/d...formular-vorgenommen

Im folgenden ein konkretes Beispiel, sehr ähnlich deiner Anforderung.
Du musst das Beispiel nur an wenigen Stellen auf deine Situation anpassen (siehe unten).
Die Textlänge ist auf maximal 20 Zeichen gesetzt.
Das benutze Feld ist vom Typ 'Textarea'.
Das UI-Framework sollte Bootstrap 5 sein.

A - Das Formular:
vi-solutions.de/forum-uploads/teaxarea_c...text-length_form.png

B - Feld-Konfiguration:
B1: Reiter 'Grundeinstellungen', Option 'Max Länge' = 20
vi-solutions.de/forum-uploads/teaxarea_c...ation_max-length.png

B2: Reiter 'Erweitert', Option 'Position Benutzerdefinierter Text' = 'Über Eingabefeld'
Die Position des benutzerdefinierten Textes muss 'Über Eingabefeld' lauten.
Andernfalls musst du den CSS-Selektor im Code ändern.

B3: Reiter 'Erweitert', Option 'Benutzerdefinierter Text' = 'Freie Zeichen 0/20'
vi-solutions.de/forum-uploads/teaxarea_c...ration_user-text.png

C - Formular-Konfiguration:
vi-solutions.de/forum-uploads/teaxarea_c...rm-configuration.png

C1: Reiter 'Frontend Webassets', Unter-Reiter 'Formular':
Wobei gilt:
fieldID = 561 --> Die Feld-ID des Feldes vom Typ 'Textarea' aus der Feld-List des Formulars.
text(`Freie Zeichen: ${count}/20`) --> Dein Start-Text (aus der Feld-Konfiguration) in Kombination mit dem berechneten Wert der aktuellen Textlänge.

Achtung:
Dein Text im JavaScript-Code sollte übereinstimmen mit dem Start-Text aus der Feld-Konfiguration.

Liebe Grüße, Ingmar

Hallo Ingmar,
erst mal vielen Dank für die gute,schnelle Info und übersichtliche Doku zu meiner Frage. Es hat soweit funktioniert.

Allerdings musste ich 'freie Zeichen' auf 'geschriebene Zeichen' umstellen, da die 'Rechnung' im Java Script leider die geschriebenen Zeichen anzeigt und nicht die noch zu schreibenden. Weiterhin habe ich die Anzeigegeschwindigkeit von '500' auf 50 reduziert, da die Anzeige sonst zu spät erschien.

Beispiel:
zwei    geschriebene Zeichen: 4/600
Benötigt
zwei    freie Zeichen: 596/600

gibt es hierzu noch eine Lösung innerhalb der Webassets?


Viele Grüße Victor

Feld Id 4 und Benutzerdefinierter Text 'geschriebene Zeichen 0/600'

jQuery(document).ready(function() {
    console.log('FEWA script loaded');
    const fieldID = 4;
    jQuery(`#field${fieldID}`).on('keydown', function() {
        window.setTimeout(function () {
            const text = jQuery(`#field${fieldID}`).val();
            const count = text.length;
            jQuery(`div.field${fieldID} > div.row:first-child > div`).text(`geschriebene Zeichen: ${count}/600`);
        }, 50);
    });
});

Hallo Ingmar,

wie muß ich das script anpassen wenn ich zwei oder mehr Felder in dem Formular habe? Einfach mehrmals das script untereinander funktioniert leider nicht.

Viele Grüße Victor

Hallo Victor,

deine Einwände sind korrekt.
Ich habe das Beispiel nach-gebessert:
- Zwei Textareas
- Eine Textarea mit der Berechnung der freien Zeichen
- Eine Textarea mit der Berechnung der geschriebenen Zeichen

Bei der Verdoppelung des Codes ist auf den besonderen Umgang mit lokalen Variablen und deren Verwendung in Event-Handlern zu achten.
Das Stichwort dazu heißt 'Closures'.
Wichtig ist die Deklaration einer eigenen Variablen für den jeweiligen Event-Handler (fieldID1, fieldID2).

Hier das neue Formular mit 2 Textareas:
vi-solutions.de/forum-uploads/teaxarea_c...ext-length_form2.png

Hier der nach-gebesserte Code:
Liebe Grüße, Ingmar

Hallo Ingmar,

das funktioniert hervorragend !

Vielen Dank

Jetzt habe ich nur noch eine Frage und zwar wie kann ich dem angezeigten Feld noch innerhalb des Scripts jeweils eine separate CSS Klasse zuweisen ?
Das Feld verhält sich so das es nicht separat ansteuerbar ist um Font, padding usw zuzuweisen, es steht leider in Zusammenhang zu weiteren Feldern innerhalb des Formulars und wird gemeinschaftlich angesprochen.

Dankeschön und Grüße Victor