Ninext

Exemple de porta-retalls

imatge.png

Aquest exemple mostra com copiar text al porta-retalls. Està tret de l'exemple Copy / Paste data de l'aplicació d'exemple de Ninext.

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

Restriccions d'ús de navigator.clipboard.writeText()

L'API navigator.clipboard.writeText(text) està subjecta a restriccions de seguretat imposades pels navegadors. L'ha de desencadenar directament una interacció de l'usuari (com ara un clic en un botó).

Si entre la interacció de l'usuari i la crida a writeText() s'hi intercala un retard o un tractament intermedi (com ara un càlcul), el navegador deixa de considerar que l'operació l'ha iniciada l'usuari i en bloqueja l'accés al porta-retalls per evitar-ne els abusos.

Bones pràctiques:

  • Crideu navigator.clipboard.writeText(text) directament dins d'un gestor d'esdeveniments d'usuari (per exemple, onclick).
  • Eviteu introduir operacions asíncrones o retards entre l'acció de l'usuari i la crida a la funció.

Exemple correcte:

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

Exemple incorrecte (pot no funcionar):

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