一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第22天,点击查看活动详情。
这一篇来看 clipboard API,就是用来访问用户剪切板的,这个 API 也是比较新的 API,不同于之前的访问剪切板的方式,这个 API 更加专业,接下来看下相关的使用。
首先我们知道,访问剪切板其实是一个很常见的需求,肯定不是最新才有的,在之前也有一些访问剪切板的库可以使用,这些库的原理基本上差不多,都是通过 document.execCommand 操控 selection 来实现的,但是实际上 document.execCommand API 早已经废弃了,虽然能用,但是是非常不推荐使用的。
而本文的主角 clipboard API 才是推荐的处理剪切板的 API,相比较曾经调用第三方库的复杂实现,clipboard API 提供了一系列简单直接的方法给我们使用。
我们通过 navigator.clipboard 可以获取到 Clipboard 对象,在上面提供了 read、readText、write、writeText 四个方法,我们可以很方便的处理剪切板内容。这里需要注意,剪切板是很重要的用户私有数据,因此我们是需要请求用户授权后才能访问的,如果使用过 github 上的 vscode 在线版本编辑器肯定会见过,当我们复制粘贴时首次会弹出权限提醒。拿到权限之后我们可以进行读和写操作。
对于简单文本数据我们使用 readText 和 writeText 即可,通用的 read 和 write 可以处理复杂类型的数据,比如用户复制了一个图片或者文件等。
这里就看一下文本数据,使用起来还是很简单的:
navigator.clipboard.readText().then(text => console.log(text));
navigator.clipboard.writeText("xxx").then().catch()
上面两个例子对应着读和写两种操作,调用的参数和返回值都没什么好解释的,返回的 Promise 也符合常规认知,总之这是一组简单且实用的 API,除了兼容性之外没有任何缺点(什么?你说这组 API 需要用户授权不能偷偷运行?建议自首)。