如何使用 JavaScript 将文本复制到剪贴板（5 行代码）？

作为开发者，我们深知在代码块旁边放置一个“复制”按钮是多么实用和好用。在某些情况下，它对提升网站的可用性大有裨益。

在这篇文章中，我们将仅使用几行 JavaScript 将文本复制到剪贴板。

标记

为了使这篇文章快速且易于理解，我将使用Tailwind CSS来设计应用程序并使一切看起来美观。

因此，对于 HTML 部分，它将非常简单（除了 Tailwind CSS 添加的一堆类）。

<main class="flex flex-col h-screen justify-center items-center bg-gray-100">
  <div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">
    <input
      class="border-blue-500 border-solid border rounded py-2 px-4"
      type="text"
      placeholder="Enter some text"
      id="copyMe"
    />
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
      onclick="copyMeOnClipboard()"
    >
      Copy
    </button>
  </div>
  <p class="text-green-700"></p>
</main>

这里有3件重要的事情需要保留：

输入标签的idcopyMe
copyMeOnClipboard()按钮标签的功能
标签p

idcopyMe将帮助我们访问用户输入的值。当用户点击按钮时Copy，它将触发处理copyMeOnClipboard()复制操作的方法，并使用 JavaScript 动态显示成功消息。

话虽如此，我们现在可以转到 JS 文件并进行最后的润色。

JavaScript 很棒

JavaScript

当然，JavaScript 很酷。它的document对象有一些非常方便的方法。

const copyText = document.querySelector("#copyMe")
const showText = document.querySelector("p")

const copyMeOnClipboard = () => {
  copyText.select()
  copyText.setSelectionRange(0, 99999) // used for mobile phone
  document.execCommand("copy")
  showText.innerHTML = `${copyText.value} is copied`
  setTimeout(() => {
    showText.innerHTML = ""
  }, 1000)
}

如您所见，我们首先选择所需的元素copyText和showText。它们分别是输入和段落标签。然后，我们使用copyMeOnClipboard()函数来处理逻辑。

该copyText元素（记住它是输入标签）使我们能够访问该select()方法，并且您可能猜到它选择了输入文本字段的内容。

最后，我们执行复制命令document.execCommand("copy")并获取剪贴板上的文本。

这太容易了

现在我们已经完成了，但我们还可以稍微改进一下，向用户显示一条成功消息。这很简单，因为我们已经有了showText元素。我们唯一要做的就是用附加成功消息，innerHTML并在 1 秒后用移除它setTimeout()。

就这样吧，朋友们！

感谢您的阅读。

叽叽喳喳	博客	通讯	GitHub	领英	CODEPEN	开发

文章来源：https://dev.to/ibrahima92/how-to-copy-text-to-the-clipboard-with-javascript-5-lines-of-code-n4m