了解如何使用剪贴板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!