/    Sign up×
Bounties /Pin to ProfileBookmark

How do I allow a user to “copy to clipboard” using JavaScript?

+ 1,000
Copy linkTweet thisAlerts:
Dec 06.2022
to post a answer
Front-endJavaScript

1 Replies

Copy linkTweet thisAlerts:
@mcDec 20.2022 — It's actually quite easy in the mordern world of today!

If you only want a plain text copied you simply need to make a Blob specifing the type - in this case - text/plain and the text to copy. E.g. Hi, WebDeveloper.com.

Using this Blob of text, you but it into a ClipboardItem and lastly ask the navigator kindly to copy that text for you.

An example would be:


const type = "text/plain";
const text = "Hi, WebDeveloper.com";
const blob = new Blob([text], { type });
const data = [new ClipboardItem({ [type]: blob })];

navigator.clipboard.write(data) // returns a promise


A neat feature of the ClipboardItem and navigator.clipboard.write in general, is that as you can see, the data speficied is an array. Meaning it can contain multiple entries - also in a clipboard manner.

Say you want to copy both a plain-text version and hyperlinked version of the above mentioned text. Sounds tedious, but it's quite easy, once we take the array into account.

Building on the example from above:


const typePlain = "text/plain";
const textPlain = "Hi, WebDeveloper.com";

const typeHTML = "text/html";
const textHTML = "Hi, WebDeveloper.com";

const data = [
new ClipboardItem({ [typePlain]: new Blob([textPlain], { typePlain }) }),
new ClipboardItem({ [typeHTML]: new Blob([textHTML], { typeHTML }) })
];

navigator.clipboard.write(data) // still returns a promise


Now try pasting this magicially copied entry into a WYSIWYG-compatible editor, and a link navigating to https://webdeveloper.com/ has been pasted, along with the Hi, -prefix.

Read more about the Clipboard Write API and ClipboardItem API.
@hqauthorThanks Mads! I see you noticed these replies support <code> tags, so I updated your original answer and removed the trial-and-error replies to get there. 😉Dec 20.2022
@mcHaha, thanks! Well, I wasn't prepared for the links to be parsed 🤫 Is there a change, you'd edit it once again - as I'm obsessed with proper formatting for readability 😬 So for the two lines in the `data`-array, might you be able to indent them? Also, I see that I'm missing a quite important part of the answer 🤦‍♂️ If you're pasting into a non-`WYSIWYG`-compatible, it'll paste the first blob in this case - it simply finds that the one that it can understand, which means the plain text will be pasted 🤩Dec 20.2022
×

Success!

Help @hq spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Marika,
tipped: article
amount: 1000 SATS,

tipper: @hatem774,
tipped: article
amount: 1 SATS,

tipper: @nearjob,
tipped: article
amount: 1000 SATS,
)...