JS Copy text to the user's clipboard

When programming a website, it often happens that you have to copy text in the user's clipboard. Whether it is to copy a piece of code, a token (like on GitHub), a URL, or simply a message. That's why in this article we will see how to copy a text in the user's clipboard, without any libraries, in vanilla javascript.

What method should I use ?

To do this, we can use the javascript function: execCommand(). But according to MDN web docs, this function will soon become obsolete and be removed from the web standards. That's why in this tutorial we will use another method: Clipboard.writeText().

The syntax of this function is quite simple:

 js
let variable = navigator.clipboard.writeText(‘your text’);

First, we will see how to copy the content of an input to the user's clipboard. Then we will see a more complicated example in which we will have several pieces of code that the user can copy.

A simple example

In this example, the user will be able to enter the text he wants in an input and copy the text it contains by clicking on a button provided for this purpose. The first step, as in any web project, is to set up our HTML. In our case, it is very simple: an input and a "copy" button.

 html
<input type="text" id="textInput" placeholder="Your text">
<button id="copy" content=""  onclick="copyText(event)" ></button>

Anticipating our future JavaScript, we call the copyText() function when the user clicks on the "copy" button.

Then, we just have to add our javascript, using the function mentioned before:

 js
// We select our input 
let input = document.getElementById("textInput");

// Copy the text of the input 
copyText = (e) => {
  // We check that the input is not empty 
  if (input.value.length) {
    // We copy the text it contains into the clipboard 
    navigator.clipboard.writeText(input.value).then(() => {
      // We confirm the action in the console 
      console.log("Text Copied !");
    })
  } else {
    console.log("The input is empty ");
  }
}

Adding a little CSS to make it look a little prettier, we get this:

(On some browsers the "copy" function can be deactivated in the codepen preview. To test the program you may have to open the program, by clicking on "Edit on CodePen")

An example a little more complicated

In this second, slightly more complicated example, we detect the user's click on the "copy" button and then we retrieve the id of the button (by removing the characters before the button number). Then we get the text of the corresponding code block. Then as in the following example we put the content of our variable text in the user's clipboard.

Going a little further

But that's not all, we can go a bit further because there are other methods for clipboard:

• For example we can retrieve the content of the user's clipboard (with their permission), even if it's not text with the read() method
• If we just want to retrieve the text, we use the readText() method.
• In the same way we can copy an image with the write() method
• Finally, the method we used in this tutorial: writeText()

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍

You want to support me ?

OR