How to copy to clipboard in JavaScript?

How to copy to clipboard in JavaScript?

JavaScript Web APIs got a bunch of methods to enhance the user experience of web applications. Learn how Copy-Paste is possible using JavaScript.

Tapas Adhikary
ยทMay 2, 2022ยท

2 min read

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • What is Clipboard?
  • How to copy to the clipboard?
  • How to paste?
  • Support of the clipboard APIs in JavaScript
  • Try it Out

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.

What is Clipboard?

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).

How to copy to the clipboard?

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.

How to paste?

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}`);
 }

Support of the clipboard APIs in JavaScript

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.

Try it Out

You can try out the Copy-Paste functionality using JavaScript clipboard APIs from here,

Also, check the extensive API documentation from the MDN Doc.


That's all for now. I hope you found this article helpful.

Let's connect, I keep sharing tips & knowledge on these platforms:

Did you find this article valuable?

Support Tapas Adhikary by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this

Impressum