JavaScripture
Contribute via GitHub
Feedback
Clipboard
Instance Methods
read
readText
write
writeText
Clipboard API
All API
No API set selected.
Clipboard
:
EventTarget
Provides access to the system cut/copy/paste clipboard.
Spec
Instance Methods
read
() :
Promise
<
Array
<
ClipboardItem
>>
Example:
<button id='paste'>paste</button> <script> document.getElementById('paste').onclick = async () => { const values = await navigator.clipboard.read(); for (const value of values) { for (const type of value.types) { const blob = await value.getType(type); console.log(`${type}: ${ blob.size } bytes`); } } }; </script>
Run
Results:
Spec
readText
() :
Promise
<
String
>
Example:
<button id='paste'>paste</button> <script> document.getElementById('paste').onclick = async () => { const value = await navigator.clipboard.readText(); console.log(`read '${value}' from clipboard`); }; </script>
Run
Results:
Spec
write
(
items
:
Iterable
<
ClipboardItem
>) :
Promise
<
undefined
>
Example:
<button id='copy'>copy</button> <script> document.getElementById('copy').onclick = async () => { // Create an image of a circle const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.fillStyle = 'red'; context.beginPath(); context.arc(50, 50, 30, 0, 2 * Math.PI); context.fill(); const cbi = new ClipboardItem({ 'image/png': new Promise(r => canvas.toBlob(r)) }); await navigator.clipboard.write([cbi]); console.log(`copied image to clipboard`); }; </script>
Run
Results:
Spec
writeText
(
text
:
String
) :
Promise
<
undefined
>
Example:
<input value='value to copy'> <button id='copy'>copy</button> <script> document.getElementById('copy').onclick = async () => { const value = document.querySelector('input').value; await navigator.clipboard.writeText(value); console.log(`copied '${value}' to clipboard`); }; </script>
Run
Results:
Spec
home
license
contribute
feedback
toggle light/dark mode
Copyright © JavaScripture Contributors