浏览器中实现剪切板操作

浏览器对剪切板的访问

Clipboard API

剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式

方法

Clipboard api 有四个方法，都是返回promise。执行方法时，需要网页本身处于焦点，可以先触发一个click或其他事件

read()
从剪贴板读取数据（比如图片），返回一个 Promise 对象

readText()
从剪贴板读取文本，返回一个 Promise 对象

write()
写入任意数据至操作系统剪贴板

writeText()
写入文本至操作系统剪贴板

例子：
// 如后台自动运行，则需触发一个聚焦，或点击等其他事件，让页面处于焦点。
// 一般情况下页面都是处于焦点中的，所以不是很需要执行下述方法
 document.dispatchEvent(new Event('focus'));
 
 navigator.clipboard.readText().then((data) => console.log(data));

事件

有关剪切板的事件包含三种
copy
cut
parse

document.execCommand [已废弃的方法]

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

使用该方法进行复制内容时，一般是先设置一个输入框，然后选中后执行
document.execCommand('copy')

具体使用方式如下例：

input.focus();
input.setSelectionRange(0, -1);
document.execCommand('copy');