How to Copy Text to Clipboard with JavaScript

You might have seen some websites that allow you to click a button to copy some contents to the clipboard. You might have wondered how this is accomplished. Let’s take a look.

HTML File Structure

We’re going to start with a basic HTML structure, like so:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Now, for this article, we’re going to copy the contents from an input tag, so let’s add it to the document, with an id of #myInput.

<body>
  <input type="text" id="myInput" />
</body>

The id is important. It’s what we’re going to use to tell our JavaScript code what to select.

Next, we should add a button that executes our function when it’s clicked.

<body>
  <input type="text" id="myInput" />
  <button onclick="copyToClipboard()">Copy</button>
</body>

If you open this file in the browser, it should now look like this:

HTML Input

Adding our script

Now that the HTML is complete, we can focus on writing the copyToClipboard function. But first, let’s add <script></script> tags to our document, right above the closing </body> tag:

<body>
  <input type="text" id="myInput" />
  <button onclick="copyToClipboard()">Copy</button>

  <script>
    // Code here
  </script>
</body>

The last step is to write our function within the <script> tags. Let’s do that now.

<body>
  <input type="text" id="myInput" />
  <button onclick="copyToClipboard()">Copy</button>

  <script>
    const copyToClipboard = () => {
      const copyText = document.getElementById("myInput");
      copyText.select();
      document.execCommand("copy");
    };
  </script>
</body>

The function will execute when the button is clicked, selecting the text in the input bar and copying it to the clipboard.

Full Code Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="myInput" />
    <button onclick="copyToClipboard()">Copy</button>

    <script>
      const copyToClipboard = () => {
        const copyText = document.getElementById("myInput");
        copyText.select();
        document.execCommand("copy");
      };
    </script>
  </body>
</html>

Update

One of our readers, Krishna Neupane, has pointed out that the above uses execCommand, which is deprecated. Below is an updated version using the clipboard API.

<input type="text" id="myInput" />
<button onclick="copy()">Copy</button>

<script>
  const copy = () => {
    let text = document.getElementById("myInput");
    text.select();

    navigator.clipboard.writeText(text.value);
  };
</script>
comments powered by Disqus

Related Posts

Solving a Common Interview Question: the Two Sum Algorithm in JavaScript

Imagine you’re at a lively party, and everyone is carrying a specific number on their back. The host announces a game – find two people whose numbers add up to the magic number, and you win a prize!

Read more

Remove Duplicates from Arrays and Strings in JavaScript

Removing duplicates is a common problem in programming that can arise in various contexts, such as cleaning up data or ensuring unique entries.

Read more

Remote First: 5 Websites for Remote Job Opportunities

Would you prefer to work in an office, or while sitting at a beach somewhere in Thailand (i.e. remotely)? Okay, maybe there’s no beach in this scenario, but there’s definitely silence, and maybe your cat.

Read more