-
-
Save minetoblend/7c9af3c8a0450bcf9f1819eac6b6e6e1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Web custom format clipboard test</title> | |
<style> | |
body { | |
padding: 2rem; | |
font-family: sans-serif; | |
} | |
section { | |
margin-bottom: 2rem; | |
display: flex; | |
flex-direction: column; | |
align-items: flex-start; | |
gap: 0.5rem; | |
} | |
h1, | |
p { | |
margin: 0; | |
} | |
h1 { | |
font-size: 1.5rem; | |
} | |
i { | |
font-style: italic; | |
opacity: 0.8; | |
} | |
</style> | |
</head> | |
<body> | |
<section> | |
<h1>Read clipboard content</h1> | |
<button id="read-clipboard">Read clipboard</button> | |
<pre><code id="clipboard-output">Click button to see contents</code></pre> | |
</section> | |
<section> | |
<h1>Copy to clipboard</h1> | |
<p> | |
<i><code>"web "</code> prefix is needed for web custom formats</i> | |
</p> | |
<div> | |
<button id="copy-clipboard">Copy to clipboard</button> | |
<span id="copy-confirmation" style="display: none"> | |
✓ Copied to clipboard | |
</span> | |
</div> | |
<textarea id="clipboard-input" rows="10" cols="50"></textarea> | |
</section> | |
<script> | |
const defaultEntries = { | |
"text/plain": "Hello, world!", | |
"web foo/bar": "custom clipboard type", | |
}; | |
document.getElementById("clipboard-input").value = JSON.stringify( | |
defaultEntries, | |
null, | |
2 | |
); | |
document | |
.getElementById("read-clipboard") | |
.addEventListener("click", async () => { | |
try { | |
const clipboardItems = await navigator.clipboard.read(); | |
const entries = {}; | |
for (const clipboardItem of clipboardItems) { | |
for (const type of clipboardItem.types) { | |
const blob = await clipboardItem.getType(type); | |
entries[type] = await blob.text(); | |
} | |
} | |
document.getElementById("clipboard-output").textContent = | |
JSON.stringify(entries, null, 2); | |
} catch (err) { | |
console.error("Failed to read clipboard contents: ", err); | |
document.getElementById("clipboard-output").textContent = | |
"Failed to read clipboard contents"; | |
} | |
}); | |
document | |
.getElementById("copy-clipboard") | |
.addEventListener("click", async () => { | |
try { | |
let parsed; | |
try { | |
const text = document.getElementById("clipboard-input").value; | |
parsed = JSON.parse(text); | |
} catch (e) { | |
alert("Invalid JSON"); | |
return; | |
} | |
const entries = {}; | |
for (const [type, value] of Object.entries(parsed)) { | |
entries[type] = new Blob([value], { type }); | |
} | |
const clipboardItem = new ClipboardItem(entries); | |
await navigator.clipboard.write([clipboardItem]); | |
showCopyConfirmation(); | |
} catch (err) { | |
console.error("Failed to write to clipboard: ", err); | |
alert("Failed to write to clipboard: " + err.message) | |
} | |
}); | |
function showCopyConfirmation() { | |
document.getElementById("copy-confirmation").style.display = "inline"; | |
setTimeout(() => { | |
document.getElementById("copy-confirmation").style.display = "none"; | |
}, 3000); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment