如何使用Javascript将文本复制到剪贴板。

要将某物复制到剪贴板，你需要使用window.navigator.clipboard。没错，就是这样。并不是所有东西都必须很困难。

这是一个使用示例。:

window.navigator.clipboard.writeText("Hello World!");

想看一个真实的例子吗？请点击这篇文章底部的"复制链接"按钮。

使用navigator.clipboard.writetext复制到剪贴板的示例：

<button data-url-copied-text="Copied!" onclick="copyURL()" role="button">Copy</button>

function copyURL() {
  this.event.preventDefault();

  const $button = this.event.target;
  const initialButtonText = $button.text;
  const urlCopiedButtonText = $button.getAttribute('data-url-copied-text');

  window.navigator.clipboard.writeText("https://abstractkitchen.com");

  $button.text = urlCopiedButtonText;
  setTimeout(function() {
    $button.text = initialButtonText;
  }, 500);
}

我硬编码了 onclick="copyURL()"，但你已经明白了。正如你所看到的，我进一步使用了data-attribute data-url-copied-text 来实现UI反馈，以便让你的其他访客感觉更舒适。

Cannot read properties of undefined reading 'writeText'

使用navigator.clipboard需要一个安全的来源。你可以使用隐藏元素和 document.execCommand('copy') 来创建一个解决方法。我记得在 jQuery 流行的时候就曾经使用过这样的技巧，但这取决于你自己。我不打算深入讨论细节 —— 这方面的内容已经在这篇文章中有了很好的描述。.