Menu
Bounties /Pin to ProfileBookmark
@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
Using this
An example would be:
A neat feature of the
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:
Now try pasting this magicially copied entry into a
Read more about the Clipboard Write API and ClipboardItem API.
How do I allow a user to “copy to clipboard” using JavaScript?
Sign in
to post a answer1 Replies ↴
1
@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.