MENU
Clipboard
The clipboard is a temporary storage location for Cut, Copy, and Paste operations over the entire operating system.
Copying text...
RESETRUNFULL
RESETRUNFULL
<!DOCTYPE html><html>
<body>
<p>Larry Tesler, inventor of the cut, copy, and paste commands, dies at 74.</p>
<button onclick="copy()">COPY</button>
<button onclick="paste()">PASTE</button><hr/>
<textarea placeholder="try pasting here" style="width:300px; height:50px;"></textarea>
<script>
function copy(){
var t = document.querySelector("p").innerText;
navigator.clipboard.writeText(t).then(function() {
alert("copied! ("+t+")");
}, function() {
alert("writing to clipboard failed");
});
}
function paste(){
navigator.clipboard.readText().then(t=>{
document.querySelector("textarea").value = t +"...RIP";
});
}
</script>
</body></html>
Copying an image into the clipboard...
RESETRUNFULL
RESETRUNFULL
<!DOCTYPE html><html><body style="height:300px;">
<button onclick="copy()">COPY</button>
<button onclick="paste()">PASTE</button><hr/>
<img/>
<script>
async function copy(){
try {
const blob = await (await fetch("/shared/logo.png")).blob();
await navigator.clipboard.write([new ClipboardItem({[blob.type]: blob})]);
alert('image copied.');
} catch(err) {
alert(err.name +": "+ err.message);
}
}
async function paste(){
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
document.images[0].src = URL.createObjectURL(blob);
}
}
} catch (err) {
console.error(err.name, err.message);
}
}
</script>
</body></html>