Add a "click to copy" button with JavaScript

Would you like to allow your users to quickly and easily copy text on your project? That famous link to share your article? That affiliate link that helps you generate additional sales? Then this article is for you! Let's explore together the two main methods that will allow you to add a "click to copy" button with the help of JavaScript.

Let's Start with an Example

To understand how we'll do this, we suggest starting with a small example.

This is a textarea that contains default text, but you can also use an input. We will also add a button to show our users that they can quickly copy the content.

<div class="wrapper">
  <textarea rows="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
  <button>Copy</button>
</div>

textarea {
  width: 100%;
  padding: 20px;
  font-size: 15px;
  outline: none;
  border: 1px solid #613bdb;
  border-radius: 10px;
  background: #c1c9df;
}

button {
  height: 45px;
  width: 155px;
  color: #fff;
  background: #613bdb;
  border: none;
  border-radius: 5px;
  font-weight: 400;
  margin-top: 8px;
  cursor: pointer;
}

Note that we are not using classes (.class) or IDs (#id), because we only have two elements.

First Objective: Detect the Click

In order to copy our text, we first need to detect when our user clicks on the "Copy" button.

To do this, we start by selecting our textarea (or input) with document.querySelector and do the same for the button.

let editor = document.querySelector("textarea");
let button = document.querySelector("button");

Now that our elements are targeted, we just need to add an event listener to the button to detect the click.

button.addEventListener('click', () => {
  console.log('I am clicked');
});

Great! We can now copy the content of the textarea (or input) when the button is clicked.

Second Objective: Copy the Text

To successfully copy the text, we have two methods that we can use. The first involves using the document object and the second uses navigator.

Let's start with the document object.

Method A

What we want to do is both:

1. Select the text
2. Copy the text
3. Modify the button text (to display a nice confirmation message, for example)

Here's what we'll do with JavaScript.

button.addEventListener('click', () => {
  editor.select();
  button.innerText = "Copied!";
});

With select() and innerText, we can select the text content and modify the button's content. However, we still can't copy the text. Here's how to do it.

button.addEventListener('click', () => {
  editor.select();
  document.execCommand("copy");
  button.innerText = "Copied!";
});

With execCommand(), we can use any command (copy, paste, cut, etc.). Here, we want to copy.

Method B

Let's move on to the second method. This one takes the code we previously used to select the content and modify the button text but changes the way we copy the text.

button.addEventListener('click', () => {
  editor.select();
  // document.execCommand("copy"); // method number 1
  navigator.clipboard.writeText(editor.value); // method number 2
  button.innerText = "Copied!";
});

With the navigator object, we can access the clipboard and write text to it. We use editor.value to retrieve the content of the textarea (or input).

It's as simple as that! You now know how to copy text very quickly and easily. If you want to learn more about HTML and CSS, we have a comprehensive course dedicated to these two programming languages. Also, feel free to share this article with your network on your social media. Thank you!