在过去的几年里我们只能使用 document.execcommand 来操作剪贴板。不过，这种操作剪贴板的操作是同步的，并且只能读取和写入 dom。
现在 chrome 66 已经支持了新的 async clipboard api，作为 execcommand 替代品。
这个新的 async clipboard api 还可以使用 promise 来简化剪贴板事件并将它们与 drag-&-drop api 一起使用。
复制：将文本写入剪贴板writetext() 可以把文本写入剪切板。writetext() 是异步的，它返回一个 promise：
navigator.clipboard.writetext('要复制的文本') .then(() => { console.log('文本已经成功复制到剪切板'); }) .catch(err => { // this can happen if the user denies clipboard permissions: // 如果用户没有授权，则抛出异常 console.error('无法复制此文本：', err); });
还可以使用异步函数 的 async 和 await：
async function copypageurl() { try { await navigator.clipboard.writetext(location.href); console.log('page url copied to clipboard'); } catch (err) { console.error('failed to copy: ', err); }}
粘贴：从剪贴板中读取文本和复制一样，可以通过调用 readtext() 从剪贴板中读取文本，该函数也返回一个 promise：
navigator.clipboard.readtext() .then(text => { console.log('pasted content: ', text); }) .catch(err => { console.error('failed to read clipboard contents: ', err); });
为了保持一致性，下面是等效的异步函数：
async function getclipboardcontents() { try { const text = await navigator.clipboard.readtext(); console.log('pasted content: ', text); } catch (err) { console.error('failed to read clipboard contents: ', err); }}
处理粘贴事件有计划推出检测剪贴板更改的新事件，但现在最好使用“粘贴”事件。它很适合用于阅读剪贴板文本的新异步方法：
document.addeventlistener('paste', event => { event.preventdefault(); navigator.clipboard.readtext().then(text => { console.log('pasted text: ', text); });});
安全和权限剪贴板访问一直为浏览器带来安全问题。如果没有适当的权限，页面可能会悄悄地将所有恶意内容复制到用户的剪贴板，粘贴时会产生灾难性的结果。想象一下，一个网页，静静地复制 rm -rf / 或解压缩炸弹图像到剪贴板。
让网页不受限制地读取剪贴板更加麻烦。用户经常将敏感信息（如密码和个人详细信息）复制到剪贴板，然后可以通过任何页面阅读，而用户根本无法察觉。
与许多新的 api 一样，navigator.clipboard 仅支持通过 https 提供的页面。为了防止滥用，只有当页面处于活动选项卡时才允许剪贴板访问。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板，但从剪贴板中读取始终需要权限。
为了更容易，复制和粘贴的两个新权限已添加到 permissions api 中。当页面处于活动选项卡时，clipboard-write 权限会自动授予页面。当您通过从剪贴板中读取数据时，则必须要求获取 clipboard-read 权限。
{ name: 'clipboard-read' }{ name: 'clipboard-write' }
与使用权限 api 的任何其它内容一样，可以检查您的应用是否具有与剪贴板交互的权限：
navigator.permissions.query({ name: 'clipboard-read'}).then(permissionstatus => { // permissionstatus.state 的值是 'granted'、'denied'、'prompt': console.log(permissionstatus.state); // 监听权限状态改变事件 permissionstatus.onchange = () => { console.log(permissionstatus.state); };});
以下是剪贴板 api 的“异步”部分真正派上用场的地方：尝试读取或写入剪贴板数据将自动提示用户获得权限（如果尚未授予）。由于 api 是基于 promise 的，所以如果用户拒绝剪贴板权限时，promise 将被 reject，因此页面可以适当地作出响应。
因为只有当页面是当前活动选项卡时，chrome 才允许剪贴板访问，因此如果直接粘贴到 devtools 中，则会发现这里的一些示例运行不正确，因为此时 devtools 本身是活动选项卡（页面不是活动选项卡）。有一个技巧：我们需要使用 settimeout 推迟剪贴板访问，然后在调用函数之前快速单击页面内部以使页面获取焦点：
settimeout(async () => { const text = await navigator.clipboard.readtext(); console.log(text);}, 2000);
回顾在引入异步剪贴板 api 之前，我们在 web 浏览器中混合了不同的复制和粘贴实现。
在大多数浏览器中，可以使用 document.execcommand('copy') 和触发浏览器自己的复制和粘贴 document.execcommand('paste')。如果要复制的文本是不存在于 dom 中的字符串，我们必须将其插入到 dom 中并选择它：
button.addeventlistener('click', e => { const input = document.createelement('input'); document.body.appendchild(input); input.value = text; input.focus(); input.select(); const result = document.execcommand('copy'); if (result === 'unsuccessful') { console.error('failed to copy text.'); }})
同样，以下是您如何在不支持新的 async clipboard api 的浏览器中处理粘贴的内容：
出自：https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues/23
document.addeventlistener('paste', e => { const text = e.clipboarddata.getdata('text/plain'); console.log('got pasted text: ', text);})
在 internet explorer 中，我们也可以通过 window.clipboarddata 访问剪贴板。如果在用户手势内进行访问（例如点击事件） – 以负责任的方式请求权限的一部分 – 则不显示权限提示。
检测和回退在支持所有浏览器的同时，使用功能检测来利用异步剪贴板是个不错的主意。您可以通过检查 navigator.clipboard 来检测对 async clipboard api 的支持：
document.addeventlistener('paste', async e => { let text; if (navigator.clipboard) { text = await navigator.clipboard.readtext() } else { text = e.clipboarddata.getdata('text/plain'); } console.log('got pasted text: ', text);});
异步剪贴板 api 的下一步是什么？正如你可能已经注意到的那样，这篇文章只涵盖了 navigator.clipboard 的文本部分。规范中有更多的通用 read() 和 write() 方法，但是这些会带来额外的实现复杂性和安全性问题（请记住那些图像炸弹？）。目前，chrome 正在推出更简单的 api 文本部分。
出自：justjavac
推荐教程：《javascript基础教程》
以上就是一起看看javascript异步剪贴板api的详细内容。