<div class="example">
<button id="writeCB">Write "Hello, World!" to Clipboard</button>
<textarea id="testDump" placeholder="Use this textarea to test pasting"></textarea>
<p>If this doesn't work for you <a href="https://codepen.io/pen/debug/xxojZOL" target="_blank">try Debug Mode</a>.</p>
</div>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #455a64;
font-family: monospace;
}
.example {
background: white;
border-radius: 12px;
overflow: clip;
width: 75dvi;
display: grid;
padding: 1rem;
gap: 1rem;
}
textarea {
width: 100%;
height: 100px;
}
p {
text-align: center;
padding-inline: 1rem;
}
document.querySelector("#writeCB").addEventListener("click", async () => {
await navigator.clipboard.writeText("Hello World!");
console.log("Done!");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.