Clipboard API
The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.
Note: This API is not available in Web Workers (not exposed via WorkerNavigator
).
This API is designed to supersede accessing the clipboard using document.execCommand()
.
Note: The clipboard is a data buffer that is used for short-term, data storage and/or data transfers, this can be between documents or applications. It is usually implemented as an anonymous, temporary data buffer, sometimes called the paste buffer, that can be accessed from most or all programs within the environment via defined programming interfaces.
A typical application accesses clipboard functionality by mapping user input such as keybindings, menu selections, etc. to these interfaces.
Accessing the clipboard
Instead of creating a Clipboard
object through instantiation, you access the system clipboard through the Navigator.clipboard
global:
js
navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".editor").innerText += clipText)
);
This snippet fetches the text from the clipboard and appends it to the first element found with the class editor
. Since readText()
(and read()
, for that matter) returns an empty string if the clipboard isn't text, this code is safe.
Interfaces
Clipboard
Secure context-
Provides an interface for reading and writing text and data to or from the system clipboard. The specification refers to this as the 'Async Clipboard API'.
ClipboardEvent
Secure context-
Represents events providing information related to modification of the clipboard, that is
cut
,copy
, andpaste
events. The specification refers to this as the 'Clipboard Event API'. ClipboardItem
Secure context-
Represents a single item format, used when reading or writing data.
Specifications
Specification |
---|
Clipboard API and events # clipboard-interface |
Clipboard API and events # clipboard-event-interfaces |
Clipboard API and events # clipboarditem |
Browser compatibility
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