Copy to clipboard with Javascript

Copy to clipboard with Javascript

by
Reading Time: 2 minutes

Copying to clipboard operation is one of the most common key combinations we use as developers. It makes us not write down every letter in a text, instead, we can just copy the content and paste it wherever we want. However, it can be challenging to do the same thing in programming languages. In this post, I’m going to show you how to copy to clipboard with Javascript.

Creating a Basic HTML Template

Before starting to write our Javascript code, we need to have an HTML page. Let’s start coding!

<html>
  <head>
    <title>Copy to clipboard with Javascript | Epoir.com</title>
  </head>
  <body>
    <button id="copy">
      Copy to Clipboard!
    </button>
  </body>
</html>

On our page, we have a simple button that has an ID.

Simple HTML page

Let’s Move to Javascript Code

Right before we start writing our Javascript code, we also have to add a <script> tag in order to write Javascript code. Let’s add it to our HTML code real quick.

<html>
  <head>
    <title>Copy to clipboard with Javascript | Epoir.com</title>
  </head>
  <body>
    <button id="copy">
      Copy to Clipboard!
    </button>
    <script>
      // Our Javascript code will be insterted here
    </script>
  </body>
</html>

Now we can start. I’ll explain the steps one by one.

Adding an Event Listener

const button = document.querySelector("#copy");

button.addEventListener("click", () => {
  // Copy to clipboard logic here
});

In the first line, we’ve declared our target button. In the second line, we’ve attached an event listener to the target button so whenever a user clicks on our button, this event listener will be fired.

Coding the Copying to Clipboard Logic

const button = document.querySelector("#copy");

button.addEventListener("click", () => {
	navigator.clipboard.writeText("EPOIR")
      .then(() => {
        alert("Copied")
      })
      .catch(() => {
        alert("Something has gone wrong")
      });
});

This might be a little confusing to new Javascript developers. Let me explain everything.

The line navigator.clipboard.writeText("EPOIR") is the line that makes the trick. This line copies the text to the clipboard. In addition, this piece of code is actually a Promise. So used a callback function to figure out if the code worked successfully.

If text got copied to the clipboard successfully, it will fire an alert text that includes “Copied” in it. If any error occurs, it’ll fire “Something has gone wrong” alert text instead.

Here’s the fully updated code:

<html>
  <head>
    <title>Copy to clipboard with Javascript | Epoir.com</title>
  </head>
  <body>
    <button id="copy">
      Copy to Clipboard!
    </button>
    <script>
    	const button = document.querySelector("#copy");

        button.addEventListener("click", () => {
            navigator.clipboard.writeText("EPOIR")
            .then(() => {
              alert("Copied")
            })
            .catch(() => {
              alert("Something has gone wrong")
            });
        });
    </script>
  </body>
</html>

There’s a Twist

According to the MDN, Clipboard API requires a security context. This means, in order to make it work we need an HTTPS connection. It works on localhost though. So don’t expect it to work on a plain HTML file.

Conclusion

In this post, we’ve learned how to copy text to a clipboard with Javascript. Stay tuned for future posts!

Leave a Comment