使用浏览器的JavaScript访问操作系统的剪贴板已经有好几年的历史了。 document.execCommand().
不幸的是，有一些问题。
- 剪贴板访问是同步的，这对性能和安全都有影响
- 支持不完善，特别是在macOS和iOS上的Safari的旧版本上
- 不同浏览器的权限访问不同，而且
- 该API从未被认为是优雅的
它终于被一个新的异步剪贴板API所取代了。它是新的，没有浏览器支持所有的功能，但它更容易使用，也更强大。
为什么一个应用程序需要访问剪贴板？
作为一个开发者，你会知道剪贴板是如何工作的，并经常使用以下键盘快捷键。
- Ctrl|Cmd+C来复制
- Ctrl|Cmd+X剪切
- Ctrl|Cmd+V来粘贴
那些计算机经验较少的人就不一定有这些知识了。他们也可能使用的是触摸屏设备，没有键盘快捷键。提供易于使用的剪切和粘贴图标可能是有用的。
此外，你可能想在剪贴板动作完成后修改内容，如添加或删除格式。
剪贴板访问是危险的!
以编程方式访问剪贴板会引起一些安全问题。
- 用户经常复制密码或私人信息，所以任何页面都不应该任意读取剪贴板数据。
- 在向剪贴板添加数据时，页面应该受到限制。一个邪恶的页面可以用一个危险的命令甚至是可执行文件来替换复制的文本。
为了避免潜在的问题，剪贴板API只能在通过HTTPS提供的页面上使用（localhost 也允许）。当在iframe中运行时，父页面也必须授予clipboard-read 和/或clipboard-write 的权限。
<iframe
src="childpage.html"
allow="clipboard-read; clipboard-write"
></iframe>
该API仅适用于活动的浏览器标签（而不是背景标签），并且只能由用户互动（如点击）来触发。必要时，会提示用户有读取剪贴板数据的权限。
当一个页面第一次要求访问剪贴板时，会显示这个警报。考虑到API是异步的并且返回一个Promise，它应该不会引起任何问题。也可以使用权限API来检查和请求该状态。
剪贴板API特性检测
当navigator.clipboard 返回一个真实的结果时，Clipboard API是可用的。比如说。
if (navigator.clipboard) {
console.log('Clipboard API available');
}
但是，这并不能保证浏览器支持所有的功能，所以有必要做进一步的检查。例如，在撰写本文时，Chrome支持API的readText()方法，而Firefox不支持。
复制和粘贴文本
在大多数应用程序中，复制和粘贴文本将是一个有用的选项。该API是令人耳目一新的简单。
// copy text TO the clipboard
await navigator.clipboard.writeText('This text is now in the clipboard');
// get text FROM the clipboard
let text = await navigator.clipboard.readText();
你需要相当多的代码来检测支持和处理错误 ...
该代码可以从GitHub下载。有关JavaScript，请参考clipboardtext.js。
这个例子实现了在添加任何HTML元素（如按钮）的data-copy 属性时的文本复制。你可以把这个值设置为以下两种情况之一。
- 一个硬编码的字符串--如
data-copy="copy this to the clipboard"。 - 一个CSS选择器--如
data-copy="#mysection"。然后，第一个匹配元素的文本内容被复制。
可选的是，你可以在data-done 属性中设置一个自定义的成功信息。
<button data-copy="#mysection" data-done="section copied">
copy text from #mysection
</button>
该按钮只在支持navigator.clipboard.writeText() 的情况下显示。当点击时，JavaScript事件处理程序定位文本，将其复制到剪贴板，并显示一个动画的成功信息。
文本粘贴按钮非常相似，只是它定义了一个data-paste 属性，该属性必须指向一个DOM节点。
<textarea id="pastehere"></textarea>
<button data-paste="#pastehere">paste</button>
