Daten formatiert in Clipboard übergeben

Diskutiere Daten formatiert in Clipboard übergeben im JavaScript Forum im Bereich Programmierung; Hi zusammen, ich habe schon ein paar Tage rumgebastelt, aber ich komme nicht weiter. Ich betreue eine Webseite mit Wordpress. Aus ein Plugin...
Neues Thema erstellen Antworten
  • Daten formatiert in Clipboard übergeben Beitrag #1
B
bigbr0ther
New member
Beiträge
4
Punkte Reaktionen
0
Hi zusammen,

ich habe schon ein paar Tage rumgebastelt, aber ich komme nicht weiter. Ich betreue eine Webseite mit Wordpress. Aus ein Plugin berechne ich die Kosten für einen Aufenthalt in einer Ferienwohnung. Die Zusammenfassung dieser Berechnung möchte ich per Klick auf einen Button in die Zwischenablage kopieren, sodass ich diese an anderer Stelle (in einem anderen Plugin) in ein entsprechendes Feld einfügen kann.

Der Export geht über ein jquery. Allerdings geht beim Kopieren und Einfügen die Formatierung verloren, sodass ich nur einen Fliesstext habe, den man schlecht lesen kann, oder ich übergebe den kompletten HTML Block, welcher noch schlechter zu lesen ist.

Daher meine Frage an euch: wie kann ich die Übergabe so manipulieren, dass ich die entsprechenden Werte optisch getrennt (Leerzeichen, Trennzeichen, von mir aus auch untereinander stehend) aus der Zwischenablage einfügen kann.

Da es kein Geheimnis ist, hier die Seite mit dem entsprechenden Rechner: Lindenhof-Schnellbach kostenrechner


Aktuell erhält man Fliesstext:

Gewünschte WohnungKleine Linde - €49Personen2Übernachtungen2Hund0Endgültiger Preis€107,80


Mit HTML als Ausgabe sieht es so aus:

<div ref="fieldname26_1" class="cff-summary-item"><span class="Feld cff-summary-title">Gewünschte Wohnung</span><span class="Wert cff-summary-value">Kleine Linde - €49</span></div><div ref="fieldname45_1" class="cff-summary-item"><span class="Feld cff-summary-title">Personen</span><span class="Wert cff-summary-value">2</span></div><div ref="fieldname11_1" class="cff-summary-item"><span class="Feld cff-summary-title">Übernachtungen</span><span class="Wert cff-summary-value">2</span></div><div ref="fieldname25_1" class="cff-summary-item"><span class="Feld cff-summary-title">Hund</span><span class="Wert cff-summary-value">0</span></div><div ref="fieldname19_1" class="cff-summary-item"><span class="Feld cff-summary-title">Endgültiger Preis</span><span class="Wert cff-summary-value">€107,80</span></div>

Das Wordpress Plugin ist: de.wordpress.org/plugins/calculated-fields-form/

Der Button hat folgenden Code:

setClipboard(jQuery('[id*="fieldname31_"]').text());

Das entsprechende Script sieht aktuell so aus:

<script>
function setClipboard(value) {
var tempInput = document.createElement("textarea");
tempInput.value = value;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>

Für Anregungen und Hilfe wäre ich sehr dankbar.

Besten Dank schon mal im Voraus.
 
  • Daten formatiert in Clipboard übergeben Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Guten Morgen bigbr0ther und willkommen im Forum!
Die Zusammenfassung dieser Berechnung möchte ich per Klick auf einen Button in die Zwischenablage kopieren, sodass ich diese an anderer Stelle (in einem anderen Plugin) in ein entsprechendes Feld einfügen kann.
Zum Vergrößern anklicken....
Wer ist in diesem Fall "ich"? Das Skript oder der Benutzer bzw. Besucher der Website? Die Zwischenablage wird normaler Weise vom Benutzer/Besucher benutzt. Wenn jedoch das Skript es tun soll wäre das Localstorage viel besser geeignet.
 
  • Daten formatiert in Clipboard übergeben Beitrag #3
B
bigbr0ther
New member
Beiträge
4
Punkte Reaktionen
0
Hi,
danke schon mal für die erste Rückmeldung.
In der Tat wäre es "der Benutzer", welcher den Inhalt der "Zusammenfassung" von einem Plugin in ein anderes Plugin übertragen soll.
Da ich nach meinen bisherigen Versuchen davon ausgegangen bin, dass die Übertragung globalen Werten bei den beiden Plugins nur kostenpflichtig möglich wäre, bin ich bisher den Weg über die Zwischenablage gegangen.
Aber meine Herausforderung mit der Formatierung der Werte innerhalb der Zusammenfassung wäre die gleiche.
 
  • Daten formatiert in Clipboard übergeben Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Versuche, ob dir diese Demo weiter hilft:
Code: 
    <div ref="fieldname26_1" class="cff-summary-item"><span class="Feld cff-summary-title">Gewünschte
            Wohnung</span><span class="Wert cff-summary-value">Kleine Linde - €49</span></div>
    <div ref="fieldname45_1" class="cff-summary-item"><span class="Feld cff-summary-title">Personen</span><span
            class="Wert cff-summary-value">2</span></div>
    <div ref="fieldname11_1" class="cff-summary-item"><span class="Feld cff-summary-title">Übernachtungen</span><span
            class="Wert cff-summary-value">2</span></div>
    <div ref="fieldname25_1" class="cff-summary-item"><span class="Feld cff-summary-title">Hund</span><span
            class="Wert cff-summary-value">0</span></div>
    <div ref="fieldname19_1" class="cff-summary-item"><span class="Feld cff-summary-title">Endgültiger
            Preis</span><span class="Wert cff-summary-value">€107,80</span></div>
    <textarea id="out"></textarea>
    <script>
        let txt = '';
        // Über alle relevanten Container
        document.querySelectorAll('[ref^="fieldname"].cff-summary-item').forEach(item => {
            // Für title und value jeweils den enthaltenen Text bereitstellen
            // und mehrfache Whitespaces, inkl. Zeilenumbrüche, entfernen
            const
                title = item.querySelector('.cff-summary-title').textContent
                    .trim().replace(/\s+/, ' '),
                value = item.querySelector('.cff-summary-value').textContent
                    .trim().replace(/\s+/g, ' ');
            // Text in geeigneter Form zusammen bauen
            txt += title + ': ' + value + ';\n'
        });
        console.log(txt);
        document.getElementById('out').value = txt;
    </script>
 
  • Daten formatiert in Clipboard übergeben Beitrag #5
B
bigbr0ther
New member
Beiträge
4
Punkte Reaktionen
0
Hi,
ich kann nachvollziehen, was in der Demo geschehen soll, aber meine Kenntnisse genügen leider nicht, dies umzusetzen.
Ich denke, ich muss die Funktion der Demo irgendwie in mein Script zum Kopieren der Zusammenfassung integrieren.

Über das JQuery beim Drücken des Buttons erhalten ich einen Wert (value). Dieser wird an die Funktion setClipboard übergeben.
Das Script macht dann ein textarea und in diese wird der value übergeben, dann selektiert und per copy in die Zwischenablage gegeben.

Die Befehle der Demo sollen irgendwo dazwischen diese Werte trimmen und formatieren, bevor diese dann als Ausgabe an die Zwischenablage übergeben werden.
Allerdings kann ich nicht erkennen an welcher Stelle und mit welchen Variablen ich dies machen muss.
Ich finde nicht den Zugang, wie ich den Value mit den Befehlen aus der Demo bearbeiten und wieder zurückgeben kann.

Evtl kannst du mir hier nochmal etwas mehr Hilfestellung geben?!?

Zur Sicherheit nochmal die Ausgangslage

setClipboard(jQuery('[id*="fieldname31_"]').html());

liefert den "value":

<div ref="fieldname48_1" class="cff-summary-item"><span class="Feld cff-summary-title">Buchungsjahr</span><span class="Wert cff-summary-value">2024</span></div><div ref="fieldname26_1" class="cff-summary-item"><span class="Feld cff-summary-title">Gewünschte Wohnung</span><span class="Wert cff-summary-value">Kleine Linde - 54€</span></div><div ref="fieldname45_1" class="cff-summary-item"><span class="Feld cff-summary-title">Personen</span><span class="Wert cff-summary-value">2</span></div><div ref="fieldname11_1" class="cff-summary-item"><span class="Feld cff-summary-title">Übernachtungen</span><span class="Wert cff-summary-value">2</span></div><div ref="fieldname25_1" class="cff-summary-item"><span class="Feld cff-summary-title">Hund</span><span class="Wert cff-summary-value">0</span></div><div ref="fieldname19_1" class="cff-summary-item"><span class="Feld cff-summary-title">Endgültiger Preis</span><span class="Wert cff-summary-value">€129,60</span></div>>

<script>
function setClipboard(value) {
var tempInput = document.createElement("textarea");
tempInput.value = value;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>
 
  • Daten formatiert in Clipboard übergeben Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Packe die Aufbereitung des Textes in eine Funktion:
Code: 
        function getTextForClipboard() {
            let txt = '';
            // Über alle relevanten Container
            document.querySelectorAll('[ref^="fieldname"].cff-summary-item').forEach(item => {
                // Für title und value jeweils den enthaltenen Text bereitstellen
                // und mehrfache Whitespaces, inkl. Zeilenumbrüche, entfernen
                const
                    title = item.querySelector('.cff-summary-title').textContent
                        .trim().replace(/\s+/, ' '),
                    value = item.querySelector('.cff-summary-value').textContent
                        .trim().replace(/\s+/g, ' ');
                // Text in geeigneter Form zusammen bauen
                txt += title + ': ' + value + ';\n'
            });
            return txt;
        }
Die Funktion setClipboard kannst Du so lassen und dann so aufrufen:
Code: 
setClipboard(getTextForClipboard());
(dies ungetestet)
 
  • Daten formatiert in Clipboard übergeben Beitrag #7
B
bigbr0ther
New member
Beiträge
4
Punkte Reaktionen
0
Wow. Vielen Dank. Das funktioniert!
 
Thema:

Daten formatiert in Clipboard übergeben

Oben Unten