Ninext

Ejemplo de portapapeles

imagen.png

Este ejemplo muestra cómo copiar texto al portapapeles. Está tomado del ejemplo Copy / Paste data de la aplicación de ejemplo de Ninext.

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

Restricciones de uso de navigator.clipboard.writeText()

La API navigator.clipboard.writeText(text) está sujeta a restricciones de seguridad impuestas por los navegadores. Debe activarse directamente por una interacción del usuario (por ejemplo, un clic en un botón).

Si entre la interacción del usuario y la llamada a writeText() se intercala un retardo o un tratamiento intermedio (como un cálculo), el navegador deja de considerar que la operación la ha iniciado el usuario y bloquea el acceso al portapapeles para evitar abusos.

Buenas prácticas:

  • Llame a navigator.clipboard.writeText(text) directamente dentro de un gestor de eventos de usuario (por ejemplo, onclick).
  • Evite introducir operaciones asíncronas o retardos entre la acción del usuario y la llamada a la función.

Ejemplo correcto:

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

Ejemplo incorrecto (puede no funcionar):

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