Ninext

Exemple presse-papiers

image.png

Cet exemple montre comment copier du texte dans le presse-papiers. Il est tiré de l'exemple Copy / Paste data de l'application de démonstration Ninext.

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

Restrictions d'usage de navigator.clipboard.writeText()

L'API navigator.clipboard.writeText(text) est soumise à des restrictions de sécurité imposées par les navigateurs. Elle doit être déclenchée directement par une interaction de l'utilisateur (un clic sur un bouton, par exemple).

Si un délai ou un traitement intermédiaire (un calcul, par exemple) s'intercale entre l'interaction de l'utilisateur et l'appel à writeText(), le navigateur ne considère plus l'opération comme initiée par l'utilisateur et bloque l'accès au presse-papiers pour éviter les abus.

Bonnes pratiques :

  • Appelez navigator.clipboard.writeText(text) directement dans un gestionnaire d'événement utilisateur (par exemple onclick).
  • Évitez d'introduire des opérations asynchrones ou des délais entre l'action de l'utilisateur et l'appel de la fonction.

Exemple correct :

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 incorrect (peut ne pas fonctionner) :

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