此功能主要用于有人需要复制激活码、恢复密钥、代码片段等时。您还可以在屏幕上添加警报或文本（可能是模态）等功能，以通知用户文本已复制到剪贴板。
以前，您会使用document.execCommand() 命令来处理此问题，但现在已弃用（不再推荐使用）。现在您可以使用Clipboard API，它允许您响应剪贴板命令（剪切、复制和粘贴），并异步读取和写入系统剪贴板。
在本文中，您将学习如何使用Clipboard API将文本和图像写入（复制）到剪贴板。
如果您赶时间，下面是代码：
<p id="myText">Hello World</p><button class="btn" onclick="copyContent()">Copy!</button>
<script>
let text = document.getElementById('myText').innerHTML;
const copyContent = async () => {
try {
await navigator.clipboard.writeText(text);
console.log('Content copied to clipboard');
} catch (err) {
console.error('Failed to copy: ', err);
}
}
</script>
如果您不着急，让我们了解更多关于剪贴板API的信息，并看看它是如何与演示项目一起工作的。
如何检查浏览器的权限
重要的是要知道，Clipboard API仅支持通过HTTPS提供的页面。在尝试写入剪贴板之前，您还应该检查浏览器权限，以验证您是否具有写入权限。您可以使用navigator.permissions查询执行此操作：
navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
if (result.state == "granted" || result.state == "prompt") {
alert("Write access granted!");
}});
如何将文本复制到剪贴板
要使用新的Clipboard API复制文本，您将使用异步writeText()方法。此方法只接受一个参数-要复制到剪贴板的文本。这可以是一个字符串，一个包含变量和其他字符串的模板文本，或者一个用于容纳字符串的变量
由于这个方法是异步的，所以它会返回一个promise。如果剪贴板已成功更新，这个Promise将会 resolved，否则将会 rejected：
navigator.clipboard.writeText("This is the text to be copied")
.then(() => {
console.log('Content copied to clipboard');
/* Resolved - text copied to clipboard successfully */
},() => {
console.error('Failed to copy');
/* Rejected - text failed to copy to the clipboard */
});
你也可以结合try/catch使用async/await：
async function copyContent() {
try {
await navigator.clipboard.writeText('This is the text to be copied');
console.log('Content copied to clipboard');
/* Resolved - text copied to clipboard successfully */
} catch (err) {
console.error('Failed to copy: ', err);
/* Rejected - text failed to copy to the clipboard */
}
}
结论
在本文中，您学习了如何使用剪贴板API将文本复制到带有JavaScript的剪贴板，而无需跳出常规思维或安装任何JavaScript库。
