April 18, 2020
You can only copy text for the user if it's in an input
or textarea
.
<input class="copy-to-clipboard" />
If you don't want to have a visible input
element on the page, you can add this CSS to the input so that it still exists (in the top left corner) but isn't visible or clickable:
input.copy-to-clipboard {
opacity: 0;
pointer-events: none; /* to ignore clicks */
position: absolute;
top: 0;
left: 0;
}
Now that you've got the input
element, you can use JavaScript to fill the value of the input and copy that text to the clipboard:
const copyText = (text) => {
const input = document.querySelector("input.copy-to-clipboard")
input.value = text
input.select()
input.setSelectionRange(0, 9999) // selects characters 0 through 9,999 in the input
document.execCommand("copy")
document.activeElement.blur() // deselects the input
}
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!