vi-solutions
Software + Internet

Joomla 5 Notice

We are pleased to announce that as of January 29, 2024, all of our Joomla extensions are compatible with Joomla 5.

For all who are still updateing from Joomla 3 to Joomla 4: Joomla 4 Migration instructions are available here:

There is now a separate Documentation for Visforms for Joomla 4 and for Visforms for Joomla 5!

Forum

Visforms Subscription user can ask questions in our forum. Please log in with the relevant user first.
Everybody can access the forum for reading.

Please only ask 1 question per topic.

Due to public holidays and vacations, longer response times can be expected for inquiries in the forum between May 18, 2024 and June 2, 2024.

Restliche Zeichen in Textfeld anzeigen

More
1 week 4 days ago #10401 by vrelling
Restliche Zeichen in Textfeld anzeigen was created by vrelling
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.


 

More
1 week 4 days ago #10404 by Administrator IV
Replied by Administrator IV on topic Restliche Zeichen in Textfeld anzeigen
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':
Code:
jQuery(document).ready(function() {     console.log('FEWA script loaded');     const fieldID = 561;     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(`Freie Zeichen: ${count}/20`);         }, 500);     }); });

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
:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).
The following user(s) said Thank You: MaliRaj, vrelling

More
6 days 19 hours ago #10410 by vrelling
Replied by vrelling on topic Restliche Zeichen in Textfeld anzeigen
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);
    });
});

More
6 days 17 hours ago #10411 by vrelling
Replied by vrelling on topic Restliche Zeichen in Textfeld anzeigen
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

More
4 days 19 hours ago #10417 by Administrator IV
Replied by Administrator IV on topic Restliche Zeichen in Textfeld anzeigen
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:
Code:
// calculate text length in textarea as it changes and show the langth as formatted text as user defined text above the field jQuery(document).ready(function() {     console.log('FEWA script loaded');          // field: message (free characters)     const fieldID1 = 561;     jQuery(`#field${fieldID1}`).on('keydown', function() {         window.setTimeout(function () {             const text = jQuery(`#field${fieldID1}`).val();             const count = 20 - text.length;             jQuery(`div.field${fieldID1} > div.row:first-child > div`).text(`Freie Zeichen: ${count}/20`);         }, 50);     });     // field: note (written characters)     const fieldID2 = 581;     jQuery(`#field${fieldID2}`).on('keydown', function() {         window.setTimeout(function () {             const text = jQuery(`#field${fieldID2}`).val();             const count = text.length;             jQuery(`div.field${fieldID2} > div.row:first-child > div`).text(`Geschriebene Zeichen: ${count}/20`);         }, 50);     }); });

Liebe Grüße, Ingmar
:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).
The following user(s) said Thank You: MaliRaj, vrelling

More
3 days 22 hours ago #10421 by vrelling
Replied by vrelling on topic Restliche Zeichen in Textfeld anzeigen
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
 

Moderators: Administrator AV, Administrator IV
Powered by Kunena Forum

Visforms Subscription

Visforms Extensions

Useful extensions for Visforms which enable you to integrate your forms perfectly into your website and to perform special tasks which turn Visforms into much more than just a form generator.

Info