Search for a command to run...
JavaScript Web APIs got a bunch of methods to enhance the user experience of web applications. Learn how Copy-Paste is possible using JavaScript.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Thank you boystrong1001 eddy
Even I use Clipboard API but with the support for fallback like below,
(FB/Instagram browser doesn't support just clipboard API)
async function copyLink(){
try{
await navigator.clipboard.writeText(link);
console.log("Link Copied");
}
catch(e){
copyToClipbordFallback(link);
console.log("Link Copied");
}
}
function copyToClipbordFallback(text){
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
textArea.remove();
}
so this fallback is mainly for FB/IG Browsers and other old browsers
Yes that's a good callout Hrithwik
Glad it's being suggested to use the Clipboard API and not the now deprecated one that you sometimes see floating around on "JavaScript Tips" on Twitter.
For reference:
execCommand('copy')
don't use that
Absoloutely Diego
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
Copy-Paste is a fundamental need in application usage. Our users need this feature in the applications and websites as much as we developers need it while programming 😉. In this article, we will learn the JavaScript APIs available to help with copy-paste programmatically.
A clipboard is short-term storage to keep some information and data for some moment. The operating system provides this storage for applications to keep relevant data for a shorter duration such that the application/program can read it at a later point in time. The clipboard's content is usually managed in the computer's RAM(Random Access Memory).
JavaScript provides Asynchronous web APIs to copy the content to the clipboard. The JavaScript navigator object has the helpful clipboard API methods. The `writeText()' method is responsible for copying(or writing) to the clipboard.
try {
let value = input.value;
if(navigator.clipboard) {
await navigator.clipboard.writeText(value);
console.log(`The text '${value}' is in the Clipboard Now!`);
} else {
console.log(`Clipboard API is Not Supported`);
}
} catch (err) {
console.error(`Failed to copy: ${err}`);
}
The writeText() method takes the value to copy(or write to the clipboard) as an argument. You must also handle the error using a try-catch block. The code snippet above shows how to copy to the clipboard using the writeText method.
The method readText() is used to read the content from the clipboard,, and thus, you can paste it to a target application.
try {
if (navigator.clipboard) {
const fromClipboard = await navigator.clipboard.readText();
input.value = fromClipboard;
console.log(`The text '${fromClipboard}' is pasted successfully!`);
} else {
console.log(`Clipboard API is Not Supported`);
}
} catch (err) {
console.error(`Failed to paste: ${err}`);
}
Several web browsers already support the clipboard APIs. You can check the current support from here. As a measure, you must check for the navigator.clipboard availability using a simple if-else condition as we have seen in the code snippets above.
You can try out the Copy-Paste functionality using JavaScript clipboard APIs from here,
Also, check the extensive API documentation from the MDN Doc.
Let's connect, I keep sharing tips & knowledge on these platforms: