Ninext

Beispiel Zwischenablage

Bild.png

Dieses Beispiel zeigt, wie man Text in die Zwischenablage kopiert. Es stammt aus dem Beispiel Copy / Paste data der Ninext-Beispielanwendung.

function copyToClipboard(text : text) do
 #{:text navigator.clipboard.writeText(text);}#
end;

Einschränkungen bei der Verwendung von navigator.clipboard.writeText()

Die Schnittstelle navigator.clipboard.writeText(text) unterliegt Sicherheitsbeschränkungen der Browser. Sie muss unmittelbar durch eine Benutzeraktion ausgelöst werden (etwa einen Klick auf eine Schaltfläche).

Liegt zwischen der Benutzeraktion und dem Aufruf von writeText() eine Verzögerung oder eine Zwischenverarbeitung (etwa eine Berechnung), so betrachtet der Browser den Vorgang nicht mehr als vom Benutzer ausgelöst und sperrt den Zugriff auf die Zwischenablage, um Missbrauch zu verhindern.

Bewährte Vorgehensweise:

  • Rufen Sie navigator.clipboard.writeText(text) direkt in einem Ereignis-Handler des Benutzers auf (z. B. onclick).
  • Vermeiden Sie asynchrone Operationen oder Verzögerungen zwischen der Benutzeraktion und dem Funktionsaufruf.

Richtiges Beispiel:

document.getElementById("copyButton").addEventListener("click", () => {
    navigator.clipboard.writeText("Copied text!")
        .then(() => console.log("Text copied successfully!"))
        .catch(err => console.error("Error copying text:", err));
});

Falsches Beispiel (funktioniert möglicherweise nicht):

document.getElementById("copyButton").addEventListener("click", () => {
    setTimeout(() => { // Introducing a delay may prevent copying
        navigator.clipboard.writeText("Copied text!");
    }, 100);
});