Przykład ze schowkiem

obraz.png

Ten przykład pokazuje, jak skopiować tekst do schowka. Pochodzi on z przykładu Copy / Paste data z przykładowej aplikacji Ninext.

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

Blok nie ma adnotacji typu: działa, nic nie zwracając. Adnotacja taka jak :text zapowiadałaby wartość, którą należy zwrócić przez return; od wersji 3.2.0 karta Błędy sygnalizuje blok z typem, który niczego nie zwraca.

Ograniczenia użycia navigator.clipboard.writeText()

Interfejs navigator.clipboard.writeText(text) podlega ograniczeniom bezpieczeństwa narzuconym przez przeglądarki. Musi zostać wyzwolony bezpośrednio przez działanie użytkownika (na przykład kliknięcie przycisku).

Jeśli między działaniem użytkownika a wywołaniem writeText() pojawi się opóźnienie lub przetwarzanie pośrednie (na przykład obliczenie), przeglądarka przestaje uznawać operację za zainicjowaną przez użytkownika i blokuje dostęp do schowka, aby zapobiec nadużyciom.

Dobre praktyki

  • Wywoływać navigator.clipboard.writeText(text) bezpośrednio w obsłudze zdarzenia użytkownika (np. onclick).
  • Unikać wprowadzania operacji asynchronicznych lub opóźnień między działaniem użytkownika a wywołaniem funkcji.

Przykład poprawny:

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

Przykład niepoprawny (może nie zadziałać):

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