Clipboard API

剪贴板 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Clipboard
read
formats.unsanitized parameter
Experimental
readText
Supports image/png MIME type
Supports text/html MIME type
Supports text/plain MIME type
write
writeText

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

api.ClipboardEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ClipboardEvent
ClipboardEvent() constructor
clipboardData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.ClipboardItem

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ClipboardItem
ClipboardItem() constructor
getType() method
presentationStyle
supports() static method
Support for image/svg+xml MIME type.
Experimental
Support for custom formats starting with web .
Experimental
types

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Has more compatibility info.

参见