⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅
长时间我们一直在使用 document.execCommand 来与剪切板做交互，尤其是基本上都在使用 clipboard.js 这个库，其基本原理也是插入 DOM 树中一个隐藏的 textarea 元素，然后将要复制的文本写入到 textarea 元素中，最后调用 textarea 的 select 方法和 document.execCommand(‘copy’) 方法，然后删除 textarea 元素
虽说 execCommand 能够一定程度上解决浏览器兼容问题：
即便是使用一个简单的剪切板都这么费劲需要一个第三方库，而且剪切板的这种方法是同步的。同步方法交互剪切板的阻塞、有限的访问权限、跨浏览器体验不一致、对多种数据类型的支持有限等问题解决起来也是麻烦。
这里有篇文章讲述到底该如何用 JS 操作剪切板：https://www.lucidchart.com/te…
???? 无论如何，异步剪切板 Async Clipboard API 这个 API 在 Chrome 66 版本以上得到了支持：
我们可以在新版本中使用这个异步版本的剪切板，那么具体该如何使用这个 API 呢
权限
使用这个 API 当然是需要获取权限的，我们可以使用 PaymentRequest 这个 API 来监听是否拥有这个权限：
对应的有两个 query 查询条件：
{name: ‘clipboard-read’}
{name: ‘clipboard-write’}
读取剪切板
调用 clipboard 对象下的 readText 方法即可 ????
navigator.clipboard.readText().then(console.log)
写入剪切板
navigator.clipboard.writeText(+new Date())
上面的代码每次刷新页面都会写入最新时间戳
另外还有 read 和 write 方法，但浏览器没有实现，可以读取或写入其他类型格式的数据
请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈八卦 ????