How to work with clipboard
Clipboard API consits from following classes:
- Clipboard - provides reading and writing text and data to or from the system clipboard. All object methods are asynchronous (the specification refers to this as the 'Async Clipboard API).
- ClipboardEvent - represents events providing information related to modification of the clipboard.
- ClipboardItem - represents a single item format, used when reading or writing data.
The Clipboard API can be used to implement cut, copy, and paste features within a web application.
The system clipboard is exposed through the global navigator.clipboard property.
Calls to the methods of the Clipboard object will not succeed if the user hasn't granted the needed permissions. Pages in active tabs can write to the clipboard without requesting permission, but reading from the clipboard always requires permission.
In some browsers Clipboard API is available only for HTTPS pages.
clipboard permissions
You can check permissions before working with clipboard.
navigator.permissions.query({name: "clipboard-write"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
/* write to the clipboard now */
}
});
navigator.permissions.query({name: "clipboard-read"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
/* read data from clipboard */
}
});
If you want to use the clipboard in an <iframe> you should grant permissions.
<iframe
src="index.html"
allow="clipboard-read; clipboard-write">
</iframe>
text clipboard
// copy text from <textarea> or <input>
var txt = document.getElementById('txtSrc').value;
navigator.clipboard.writeText(txt);
// copy text from non-form element such <div>
var txt = document.getElementById('txtSrc').textContent;
navigator.clipboard.writeText(txt);
// copy text and check is operation was successful
navigator.clipboard.writeText(txt).then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
});
// read text from clipboard to element such <div>
navigator.clipboard.readText().then(
clipText => document.getElementById('txtDst').innerText = clipText);
There is also old way using document.execCommand() method. It has less convenience. You must select text only from <textarea> or <input>, not from <div>. Then run command document.execCommand('copy'). If you want copy content from <div> you must use textarea/input as an intermediate step. Also it does not work on background pages.
image clipboard
Currently clipboard support only png images.
Image must be converted to Blob object for writig to clipboard.
Firefox and Safari don't support the ClipboardItem class yet.
fetch('/images/cyclist.png') // load image by url
.then(response => response.blob())
.then(imgData => { // write image blob to clipboard
var clipItem = new ClipboardItem({'image/png': imgData});
navigator.clipboard.write([clipItem]);
});
// Get content of canvas as Blob object.
// Actually "image/png" is default value, and can be omitted.
canvas.toBlob(canvasBlob =>{
var clipItem = new ClipboardItem({'image/png': canvasBlob});
navigator.clipboard.write([clipItem]);
}, "image/png");
// Try read image from the first ClipboardItem object.
// You can extend the code to check all available objects.
navigator.clipboard.read()
.then( data => { data[0].getType('image/png')
.then(imgBlob => {
var fr = new FileReader();
fr.onload = frEvent => {
var img = document.getElementById('dstImg');
img.src = frEvent.target.result;
}
fr.readAsDataURL(imgBlob);
});
},
err => console.log('Image not found in clipboard, got exception: ', err)
);