有时我使用的网站提供一些我需要复制和粘贴的东西。也许是一个API密钥。也许是我刚买的一个应用程序的激活令牌。
总之，他们让你点击一个盒子，里面的文字就会被复制到剪贴板上，这样我就可以直接去把它粘贴到某个地方。
我们怎样才能在我们的网站上实现这个功能呢？使用剪贴板API!
还有一种方法可以使复制/粘贴工作，使用
document.execCommand()功能。我不打算在这里介绍这个选项。剪贴板API是为了继承该命令的功能。
剪贴板API在navigator.clipboard 对象上可用。
剪贴板API是比较新的，并不是所有的浏览器都实现了它。它在Chrome、现代Edge（基于chromium）、Firefox和Opera上运行。
你可以检查这个对象是否存在，以确保该功能被实现。
if (!navigator.clipboard) {
// Clipboard API not available
return
}
现在你必须明白的一件事是，没有用户的许可，你不能从剪贴板上复制/粘贴。
如果你在读或写剪贴板，权限是不同的。如果你是写，你所需要的是用户的意图：你需要把剪贴板的动作放在对用户动作的响应中，比如点击。
写入剪贴板
假设你在一个HTML页面中有一个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中看到并尝试这个例子
在CodePen上看到Flavio Copes (@flaviocopes)的PenA Clipboard API Write例子。
从剪贴板中读出
下面是如何从剪贴板中读取的。我们有一个p 元素。
当点击它时，我们想用存储在剪贴板中的内容来改变元素的内容。
首先，我们创建一个点击事件监听器，并检查剪贴板API的可用性。
document.querySelector('p').addEventListener('click', async event => {
if (!navigator.clipboard) {
// Clipboard API not available
return
}
})
然后我们调用navigator.clipboard.readText() 。使用async/await，我们将文本结果存储到一个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)
}
})
当你在你的网站上第一次执行这段代码时，你会看到这个框出现。
你需要授予网站从剪贴板读取的权限，否则如果任何网站可以在没有你明确许可的情况下读取你的剪贴板，这将是一个巨大的安全问题。
在Codepen上看到。
请看CodePen上Flavio Copes (@flaviocopes)的PenA Clipboard API Read例子。
