Direkt zum Hauptinhalt

Einen copy to clipboard Button über eine embed Komponente

Beschreibung:

Dropdown Menüs und Datumsfelder lassen sich mit dem Mauscursor nicht kopieren.
Also zweckentfremden wir die embed Komponente mit einem Javascript zum kopieren.


Durchführung:

Eine embed Komponente an die gewünschte Stelle hinzufügen.

Dann diesen HTML-Code einfügen
!!!WICHTIG bei Text nicht bei Javascript is ja HTML-Code!!!
Die Variable value mit der Variable ersetzten (also zum Beispiel textfeld aus der koiiert werden soll.)

<button onclick="( function() 
{  navigator.clipboard.writeText('{{ value }}').then(function (){alert ('Copied!')}) }
)()">Copy Link</button>

Hier ein beispiel wenn ein Datum umformatiert werden soll.

<button onclick="( function() 
{  
    var value = '{{ value }}'; // Das Originaldatum
    var date = new Date(value); // Erstellen eines neuen Date-Objekts mit dem Wert
    var day = String(date.getDate()).padStart(2, '0'); // Extrahieren und Formatieren des Tages
    var month = String(date.getMonth() + 1).padStart(2, '0'); // Extrahieren und Formatieren des Monats
    var year = date.getFullYear(); // Extrahieren des Jahres

    // Zusammenfügen der Teile in das gewünschte Format
    var formattedDate = day + ':' + month + ':' + year;

    navigator.clipboard.writeText(formattedDate).then(function (){
        alert ('Copied!')
    })
})()">Copy Link</button>