Пример работы с буфером обмена

image.png

Этот пример показывает, как скопировать текст в буфер обмена. Он взят из примера Copy / Paste data в демонстрационном приложении Ninext.

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

У блока нет аннотации типа: он выполняет действие, ничего не возвращая. Аннотация вроде :text объявляла бы значение, которое нужно вернуть через return; начиная с версии 3.2.0 вкладка Ошибки сообщает о типизированном блоке, который ничего не возвращает.

Ограничения на использование navigator.clipboard.writeText()

API navigator.clipboard.writeText(text) подчиняется правилам безопасности браузеров. Он должен вызываться непосредственно в ответ на действие пользователя (например, нажатие кнопки).

Если между действием пользователя и вызовом writeText() возникает задержка или промежуточная обработка (например, вычисление), браузер перестаёт считать операцию инициированной пользователем и блокирует доступ к буферу обмена во избежание злоупотреблений.

Рекомендации

  • Вызывайте navigator.clipboard.writeText(text) прямо в обработчике пользовательского события (например, onclick).
  • Не вводите асинхронных операций и задержек между действием пользователя и вызовом функции.

Правильный пример:

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));
});

Неправильный пример (может не работать):

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