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

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

The Best Way to Learn How to Code in 2024

Codecademy has been around for awhile now, but we felt this masterful site deserved to be highlighted in an article. It is one of the resources I originally used when I was learning how to code.

Read more

Unveiling the Fascination of the Collatz Conjecture: Exploring Sequence Creation with JavaScript

The Collatz Conjecture, also known as the 3x+1 problem, is a fascinating mathematical puzzle that has intrigued mathematicians for decades. It has sparked publications with titles such as The Simplest Math Problem Could Be Unsolvable, or The Simple Math Problem We Still Can’t Solve because it is, indeed, rather simple-looking.

Read more