JavaScript 复制到剪贴板使用 JavaScript 仅需 10 行代码即可将文本复制到剪贴板

本文最初发布在我的博客上。更多文章和教程请访问inspiredwebdev.com。查看我在Educative上的JavaScript 课程，学习从 ES6 到 ES2019 的所有内容。

大家好，我是 Alberto Montalesi，一位自学成才的全栈开发者。我在我的网站inspiredwebdev.com上创建 JavaScript 教程和课程，旨在激励其他开发者成长，并打造他们理想的职业。

在这个简短的教程中，我们将了解如何仅用几行代码在您的网站或应用程序中实现复制到剪贴板的JavaScript功能。

出于多种原因，您希望有一个按钮来复制到剪贴板，而不是简单地让用户突出显示并手动复制文本，幸运的是，这是一个非常容易实现的功能。

在深入研究代码之前，您可以查看我原始文章中的演示。

我们要做的就是创建一个不可见的DOMtextarea元素，将字符串复制到其中，然后执行“复制”命令将值保存到剪贴板。完成后，我们将删除该DOM元素。

首先，让我们开始创建虚拟内容：

<div>
    <p id="item-to-copy">I copied this text from InspiredWebDev.com</p>
    <button onclick="copyToClipboard()">Copy</button>
<div>

这里没什么可看的，只有p一个带有一些虚拟内容和buttononclick 功能的标签。

我必须id在我的标签上放置一个p才能使用我的功能来定位它。

编写 JavaScript 以复制到剪贴板

现在让我们编写函数，然后检查每一行代码：

function copyToClipboard() {
    const str = document.getElementById('item-to-copy').innerText;
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}

让我们逐行检查代码：

首先，我们获取目标元素的内容。如果您已经将字符串传递给函数，则可以省略此行。在本例中，内容来自页面的特定元素，因此我们需要在点击时获取它。

然后我们继续创建一个新textarea元素并为其设置一些属性：

• 我们将值设置为与字符串内容匹配
• 我们设置只读、绝对位置和左-9999px只是为了让textarea用户看不见

然后我们将元素附加到 DOM，以便在完成后立即调用select()它。

select 的作用只是选择元素的内容。你可能会问：为什么我们不直接调用select()标签p？为什么我们要创建一个新的textarea？

答案很简单，我们只能调用select()和textarea元素input。

例如，如果您在评论字段上实现复制到剪贴板的功能，而该字段可能已经在使用textarea元素，那么您可以select()直接调用它，而不必像我们在本教程中所做的那样创建新的 DOM 元素。

完成后，select()我们将调用document.execCommand('copy')它将复制选定的内容。

textarea最后，我们使用 从 DOM 中删除removeChild(el)。

现在，如果您尝试按“ctrl + v”或右键单击并选择粘贴，您将看到标签的内容p已复制到剪贴板；

让我们让它更直观一些，在调用之后在我们的函数中添加一行removeChild()：

alert(`Copied: ${str}`);

现在，继续重试。您将看到一条警报，告知您刚刚复制的内容。

太棒了！只用了10行代码，你就创建了一个简单但非常实用的功能。

非常感谢你的阅读。欢迎在DevTo、我的博客inspiredwebdev或Twitter上关注我。访问Educative.io获取交互式编程课程。

免责声明：亚马逊和 Educative 的链接为联盟链接，您的购买将为我带来额外佣金。谢谢

在Amazon和Leanpub上获取我的电子书