异步复制到剪贴板

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索 JavaScript 中的剪贴板 API,并学习如何将文本异步复制到剪贴板。你将学习如何检查该 API 的可用性,并使用它将文本写入剪贴板。在本实验结束时,你将对如何在 JavaScript 应用程序中使用剪贴板 API 有扎实的理解。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("`Browser Object Model`") subgraph Lab Skills javascript/variables -.-> lab-28219{{"`异步复制到剪贴板`"}} javascript/data_types -.-> lab-28219{{"`异步复制到剪贴板`"}} javascript/arith_ops -.-> lab-28219{{"`异步复制到剪贴板`"}} javascript/comp_ops -.-> lab-28219{{"`异步复制到剪贴板`"}} javascript/cond_stmts -.-> lab-28219{{"`异步复制到剪贴板`"}} javascript/async_prog -.-> lab-28219{{"`异步复制到剪贴板`"}} javascript/bom -.-> lab-28219{{"`异步复制到剪贴板`"}} end

将字符串复制到剪贴板的函数

要将字符串复制到剪贴板,请使用 copyToClipboardAsync 函数。该函数返回一个 Promise,当剪贴板内容更新时它会被 resolve。以下是步骤:

  1. 通过使用 if 语句检查 NavigatorNavigator.clipboardNavigator.clipboard.writeText 是否为真值,来判断剪贴板 API 是否可用。
  2. 如果剪贴板 API 可用,使用 Clipboard.writeText() 将给定的值 str 写入剪贴板。
  3. 返回 Clipboard.writeText() 的结果,这是一个 Promise,当剪贴板内容更新时它会被 resolve。
  4. 如果剪贴板 API 不可用,使用 Promise.reject() 以适当的错误消息拒绝该 Promise。
  5. 如果你需要支持旧版浏览器,请使用 Document.execCommand() 代替 Clipboard.writeText()。你可以在 copyToClipboard 代码片段中了解更多相关信息。

以下是 copyToClipboardAsync 函数:

const copyToClipboardAsync = (str) => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(str);
  }
  return Promise.reject("The Clipboard API is not available.");
};

要使用该函数,将你想要复制的字符串作为参数调用 copyToClipboardAsync,如下所示:

copyToClipboardAsync("Lorem ipsum"); // 'Lorem ipsum' 已复制到剪贴板。

总结

恭喜你!你已经完成了“异步复制到剪贴板”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程