浏览器对剪切板的访问
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');