如何使用JavaScript复制到剪贴板

Sometimes I use sites that provide something I need to copy and paste somewhere. Maybe an API key. Maybe an activation token for an application I just bought.

有时，我使用的网站会提供我需要复制并粘贴到某处的内容。 也许是API密钥。 也许是我刚购买的应用程序的激活令牌。

Anyway, they let you click inside a box, and the text inside it is copied to the clipboard, so I can directly go and paste it somewhere.

无论如何，他们可以让您在一个框内单击，然后将其中的文本复制到剪贴板，因此我可以直接将其粘贴到某个位置。

How can we implement that functionality in our sites? Using the Clipboard API!

我们如何在我们的站点中实现该功能？ 使用剪贴板API！

There’s another way to make copy/paste work, using the document.execCommand() functionality. I’m not going to cover that option here. The Clipboard API is meant to be the successor of that command.

使用document.execCommand()功能还有另一种使复制/粘贴工作的方法。 我不会在这里讨论该选项。 剪贴板API是该命令的后继者。

The Clipboard API is available on the navigator.clipboard object:

剪贴板API在navigator.clipboard对象上可用：

navigator.clipboard

The Clipboard API is relatively recent and not all browsers implement it. It works on Chrome, modern Edge (chromium-based), Firefox and Opera.

Clipboard API相对较新，并非所有浏览器都实现。 它适用于Chrome，现代Edge(基于Chrome)，Firefox和Opera。

You can check for the existence of this object to make sure the functionality is implemented:

您可以检查此对象是否存在，以确保已实现功能：

if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

One thing you must now understand is that you can’t copy / paste from the clipboard without the user’s permission.

您现在必须了解的一件事是，未经用户许可，您无法从剪贴板复制/粘贴。

The permission is different if you’re reading or writing to the clipboard. In case you are writing, all you need is the user’s intent: you need to put the clipboard action in a response to a user action, like a click.

如果您正在读取或写入剪贴板，则权限是不同的。 如果您正在写，则只需用户的意图即可：您需要将剪贴板操作放入对用户操作(例如单击)的响应中。

写入剪贴板 (Writing to the clipboard)

Say you have a p element in an HTML page:

假设您在HTML页面中有一个p元素：

<p>Some text</p>

You create a click event listener on it, and you first check if the Clipboard API is available:

您在其上创建一个单击事件侦听器，然后首先检查剪贴板API是否可用：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})

Now, we want to copy the content of that p tag to the Clipboard. We do so by looking up the innerText of the element, identified by event.target:

现在，我们要将p标签的内容复制到剪贴板。 我们通过查找由event.target标识的元素的innerText来实现：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
})

Next, we call the navigator.clipboard.writeText() method, wrapping it in a try/catch to handle any error that might happen.

接下来，我们调用navigator.clipboard.writeText()方法，将其包装在try / catch中，以处理可能发生的任何错误。

This is the full code of the example:

这是示例的完整代码：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
  try {
    await navigator.clipboard.writeText(text)
    event.target.textContent = 'Copied to clipboard'
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})

Here you can see and try the example in Codepen

在这里您可以查看并尝试Codepen中的示例

See the Pen A Clipboard API Write example by Flavio Copes (@flaviocopes) on CodePen.

见笔剪贴板API写入例如由弗拉维奥COPES( @flaviocopes上) CodePen 。

从剪贴板读取 (Reading from the clipboard)

Here’s how to read from the clipboard. We have a p element:

这是从剪贴板读取的方法。 我们有一个p元素：

<p>Some text</p>

and when clicking it we want to change the element content with the content stored in your clipboard.

当单击它时，我们要使用存储在剪贴板中的内容来更改元素内容。

First we create a click event listener and we check for the Clipboard API availability:

首先，我们创建一个点击事件监听器，并检查剪贴板API的可用性：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})

Then we call navigator.clipboard.readText(). Using async/await we store the text result into a text variable and we use it as the event.target.textContent value:

然后，我们调用navigator.clipboard.readText() 。 使用异步/等待，我们将文本结果存储到text变量中，并将其用作event.target.textContent值：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  try {
    const text = await navigator.clipboard.readText()
    event.target.textContent = text
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})

The first time you execute this code on your site, you’ll see this box appearing:

第一次在您的网站上执行此代码时，您会看到此框出现：

You need to grant the permission to the site to read from the clipboard, otherwise if any site could read your clipboard without your explicit permission it would be a huge security issue.

您需要向站点授予从剪贴板读取的权限，否则，如果任何站点都可以在未经您明确许可的情况下读取剪贴板，则将是一个巨大的安全问题。

See it on Codepen:

在Codepen上查看：

See the Pen A Clipboard API Read example by Flavio Copes (@flaviocopes) on CodePen.

见笔剪贴板API读取例如由弗拉维奥·科佩斯( @flaviocopes上) CodePen 。

翻译自: https://flaviocopes.com/clipboard-api/