如何使用JavaScript复制到剪贴板

了解如何使用剪贴板API使用JavaScript复制到剪贴板

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

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

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

还有一种使复制/粘贴有效的方法,即使用document.execCommand()功能。我不会在这里讨论该选项。 Clipboard API旨在成为该命令的后继者。

剪贴板API可在navigator.clipboard目的:

navigator.clipboard

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

您可以检查此对象是否存在,以确保已实现该功能:

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

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

如果您正在读取或写入剪贴板,则权限是不同的。如果您正在编写,那么您所需要做的就是用户的意图:您需要将剪贴板操作放入对用户操作(例如单击)的响应中。

写入剪贴板

说你有一个pHTML页面中的元素:

<p>Some text</p>

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

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

现在,我们要复制该内容p标记到剪贴板。我们通过查找innerText的元素,由event.target

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

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

这是示例的完整代码:

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)
  }
})

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

看笔剪贴板API编写示例由Flavio Copes(@flaviocopes) 在密码笔

Tech Wiki Online!