Clipboard API

Baseline 2024

Newly available

Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

剪贴板 Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取或更改剪贴板内容。

该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。

访问剪贴板

除了在实例化中创建一个 Clipboard 对象,你还可以使用全局的 Navigator.clipboard 来访问系统剪贴板。

js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );

上述代码提取了剪贴板的文本并将其附在 class 为 editor 的第一个元素后面。因为当剪贴板中不是文本时, readText() (and read(), for that matter) 会返回一个空字符串,所以这段代码是安全的。

接口

Clipboard 安全上下文

提供了一个用于读写系统剪贴板上的文本和数据的接口。规范中被称为异步剪贴板 API(Async Clipboard API)。

ClipboardEvent 安全上下文

表示提供了有关剪贴板修改的信息的事件,也就是 cutcopy,和 paste。规范中被称为剪贴板事件 API(Clipboard Event API)。

规范

Specification
Clipboard API and events
# clipboard-interface
Clipboard API and events
# clipboard-event-interfaces
Clipboard API and events
# clipboarditem

浏览器兼容性

api.Clipboard

BCD tables only load in the browser

api.ClipboardEvent

BCD tables only load in the browser

api.ClipboardItem

BCD tables only load in the browser

参见