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:

{{< image title=“” w=“” h=“” o=“webp q100” p=“center” c=“rounded” src=“images/clipboard.png” alt=“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>

Topics

Javascript HTML Tutorial

About the Author

Matt Fay

Matt is the founder of JavaScript Today, a platform dedicated to high-quality JavaScript education and commentary. With a deep curiosity for technology, he gravitates toward understanding how things work and has been diving into the world of information security. Outside of coding, Matt enjoys exploring languages; he can understand some Russian and Italian, and is currently learning Thai.

GitHub LinkedIn Buy me a coffee