How to Copy the Text to the Clipboard with JavaScript

Copying the text to clipboard makes it easier to use the web page, so users will definitely like this functionality. You can achieve it using JavaScript, and we're here to help you. There are two standard methods for web pages to interact with the system clipboard: the <kbd class="highlighted">Document.execCommand()</kbd> method and the asynchronous Clipboard API.

execCommand()

Note: <kbd class="highlighted">document.execCommand()</kbd> is deprecated and should be considered obsolete for new projects. It can be used to trigger the "cut" and "copy" actions, which replaces the current contents of the clipboard with the currently selected data. Have a look at the following piece of code:

Javascript copy the text to the clipboard

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      <button id="copyTextBtn">Copy Textarea</button>
      <textarea id="copytextarea">Select and copy text</textarea>
    </p>
    <script>
      const copyTextBtn = document.querySelector('#copyTextBtn');
      copyTextBtn.addEventListener('click', function(event) {
        let copyTextarea = document.querySelector('#copytextarea');
        copyTextarea.focus();
        copyTextarea.select();
        try {
          let successful = document.execCommand('copy');
          let msg = successful ? 'successful' : 'unsuccessful';
          alert('Copy text command was ' + msg);
        } catch(err) {
          alert('Unable to copy');
        }
      });
    </script>
  </body>
</html>

Try it Yourself »

Here you place a textarea inside a paragraph element. After focusing and selecting its content, calling <kbd class="highlighted">document.execCommand('copy')</kbd> copies the text. The textarea remains in the DOM in this example.

The Clipboard API

The Clipboard API provides flexibility and doesn't limit the copying the current selection into the clipboard. You can directly specify what information to add to the clipboard.

Note: The Clipboard API requires a secure context (HTTPS) and must be triggered by a user gesture (e.g., a click event) to work.

You should call the <kbd class="highlighted">writeText()</kbd> function to copy the text into the clipboard:

Copy the Text to the Clipboard using JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <textarea id="textId">Some copying text</textarea>
    <button id="copyBtn">Copy Button</button>
    <script>
      document.getElementById("copyBtn")
        .onclick = function() {
          let text = document.getElementById("textId").value;
          navigator.clipboard.writeText(text)
            .then(() => {
              alert('Text copied to clipboard');
            })
            .catch(err => {
              alert('Error in copying text: ', err);
            });
        }
    </script>
  </body>
</html>

Try it Yourself »

You can as well write an async function and wait for the return of the <kbd class="highlighted">writeText()</kbd> function:

Javascript copy the text to the clipboard API

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <textarea id="textId">Some copying text</textarea>
    <button id="copyBtn">Copy Button</button>
    <script>
      document.getElementById("copyBtn").onclick = function() {
          let text = document.getElementById("textId").value;
          copyTextToClipboard(text);
        }
      async function copyTextToClipboard(text) {
        try {
          await navigator.clipboard.writeText(text);
          alert('Text copied to clipboard');
        } catch(err) {
          alert('Error in copying text: ', err);
        }
      }
    </script>
  </body>
</html>

Try it Yourself »

The Clipboard API gives the ability to respond to clipboard commands (cut, copy, and paste) and read from or write to the system clipboard asynchronously. Access to the contents, reading or modifying the clipboard contents is not permitted without user permission.