如何使用JavaScript将文本复制到剪贴板？

原文 | https://www.ibrahima-ndaw.com/blog/how-to-copy-text-to-clipboard-in-javascript/

翻译 | web前端开发（ID:web_qdkf）

作为一个开发人员，我们知道在代码块旁边放一个“复制”按钮有很多好处。并且在某些情况下，它对提高我们网站的可用性有很大的帮助。

在本文中，我们将只用几行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个重要的地方需要注意：

• 输入标签的ID copyMe
• copyMeOnClipboard()按钮标签的功能
• 该p标签

该ID copyMe将帮助我们访问用户输入的值。当用户单击Copy按钮时，它将触发该copyMeOnClipboard()方法，该方法将处理副本并使用JavaScript动态显示成功消息。

话虽如此，我们非常在可以移至JS文件并进行最后的修饰。

JavaScript

​

​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")并在剪贴板上获取文本。