浏览器中实现剪切板操作

浏览器对剪切板的访问

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');
原文地址:https://www.cnblogs.com/feiyu127/p/13554598.html