How to copy text to the clipboard (and read it) in JavaScript

OpenJavaScript 0
Reading Time: 2 minutes 🕑

Last updated: September 21, 2022.

You can easily copy text to the clipboard in JavaScript by using the clipboard interface available on the globally available window.navigator object.

Table of contents

Copying to the clipboard

To copy text to the clipboard, simply call the writeText() method available on window.navigator.clipboard, while passing in some text to commit to the clipboard:

/* Copying text to the clipboard */

navigator.clipboard.writeText("My text");

Commonly, you may want a user to be able to use this action multiple times, so it is best to call this action from a reusable function:

/* Reusable function for copying text to the clipboard */

function copyToClipboard(myText) {
    navigator.clipboard.writeText(myText);
}

copyToClipboard("My text");

Result-handling

Calling navigator.clipboard.writeText() returns a special promise object that can be used for result-handling. The result of the promise can be accessed using .then() and .catch() syntax.

If copying was successful, the function passed in to the .then() method is executed. In case an error occurs, the .catch() statement is triggered instead.

/* Handling the returned promise object */

function copyToClipboard(msg) {
    navigator.clipboard.writeText(msg)
      .then(() => alert(`Copied "${msg}" successfully`))
      .catch((err) => alert("Copy failed: "+ err));
}

copyToClipboard("Text to copy");

Alternatively, you can use the more modern async/await syntax for handling the returned promise:

/* Handling the promise object with async/await */

async function copyToClipboard(msg) {
  try {
    await navigator.clipboard.writeText(msg);
    alert(`Copied "${msg}" successfully`);
  } catch {
    alert("Copy failed: "+ err);
  }
}

copyToClipboard("Text to copy");

Reading text from the clipboard

You can attempt to read the contents of the clipboard by calling navigator.clipboard.readText() method:

/* Reading text from the clipboard */

navigator.clipboard.readText();

It is usually a good idea to store this action in a function, so it is reusable:

/* Reusable function for reading the clipboard */

function readClipboard() {
    navigator.clipboard.readText();
}

readClipboard("My text");

Result-handling

Like copyText(), readText() also returns a promise that can be used to handle the result using.then() and .catch() syntax.

If successful, the parameter available in the function defined in .then() will contain the contents of what was read:

/* Handling the result of reading the clipboard */

function readClipboard() {
    navigator.clipboard.readText()
    .then(res => alert("Success! Read: " + res)) // Will alert what was copied
    .catch(err => alert("Failed to read the clipboard: " + err));
}

readClipboard();

Alternatively, the result can be handled using async/await:

/* Handling the result using async/await */

async function readClipboard() {
    try {
        await navigator.clipboard.readText();
        alert("Success! Read: " + res)
    } catch {
        alert("Failed to read the clipboard: " + err);
    }
}

readClipboard();

Note that even if readText() can be used, most modern browsers will warn the user that an attempted copy of the contents of their clipboard is being made.

Is readText() ever useful?

One practical reason you may consider using readText() is to check if writeText() has worked successfully. But, because of the unreliability of the readText() method, it is better to rely on promise-handling for this purpose.

Summary

The writeText() method available on window.navigator.clipboard makes it easy to copy text to the clipboard in JavaScript. The result can then be handled using .then() and .catch() or async/await syntax.

Though possible in some browsers, it is generally not advised to rely upon the readText() method for reading the contents of the clipboard due to unreliability.

Related links: