Draft This page is not complete.
The ClipboardItem()
constructor of the Clipboard API
creates a new ClipboardItem
object which represents data to be stored or retrieved via the Clipboard API
, that is clipboard.write()
and clipboard.read()
respectively.
Note: Image format support varies by browser. See the browser compatibility table for the Clipboard
interface.
Syntax
var ClipboardItem = new ClipboardItem(ClipboardItemData);
Parameters
Note: To work with text see the Clipboard.readText()
and Clipboard.writeText()
methods of the Clipboard
interface.
Examples
The below example requests a png image using the Fetch API
, and in turn, the responses' blob()
method, to create a new ClipboardItem
and write it to the clipboard, using the Clipboard API
.
Note: You can only pass in one clipboard item at a time.
async function writeClipImg() {
try {
const imgURL = '/myimage.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
]);
console.log('Fetched image copied.');
} catch(err) {
console.error(err.name, err.message);
}
}
Specifications
Specification | Status | Comment |
Clipboard API and eventsThe definition of 'ClipboardItem' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 66 |
Edge
Full support ≤79 |
Firefox
No support No |
IE
No support No |
Opera
Full support Yes |
Safari
No support No |
WebView Android
Full support 66 |
Chrome Android
Full support 66 |
Firefox Android
No support No |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support 9.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
See also
ClipboardItem() by Mozilla Contributors is licensed under CC-BY-SA 2.5.