Ninext

剪贴板示例

图片.png

本示例演示如何把文本复制到剪贴板。它取自 Ninext 示例应用中的 Copy / Paste data 示例。

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

该代码块没有类型注解：它只执行操作，不返回任何值。像 :text 这样的注解表示会有一个值，需要通过 return 返回；自 3.2.0 版起，错误标签页会标出不返回任何值的带类型代码块。

navigator.clipboard.writeText(text) 这个 API 受到浏览器强制执行的安全限制。它必须由用户交互（例如点击按钮）直接触发。

如果在用户交互与调用 writeText() 之间出现延迟或中间处理（例如某项计算），浏览器就不再认为该操作是由用户发起的，会阻止访问剪贴板以防滥用。

最佳实践

  • 直接在用户事件处理程序（例如 onclick）中调用 navigator.clipboard.writeText(text)。
  • 避免在用户操作与函数调用之间引入异步操作或延迟。

正确示例：

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