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 methods that the browser extensions can interact with the system clipboard: the Document.execCommand() method and the asynchronous Clipboard API.

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

execCommand()

The document.execCommand() 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:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      <button id="copyTextBtn">Copy Textarea</button>
      <textarea id="copytextarea">Selcet and copy text</textarea>
    </p>
    <script>
      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>

Here you create a fully transparent textarea and attach it to the document's body. After doing it, you set its content with the text to be copied. Calling document.execCommand(copy) selects the textarea contents. The final step is to remove the textarea from the document.

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.

You should call the writeText() function to copy the text into the clipboard:

<!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>

You can as well write an async function and wait for the return of the writeText() function:

<!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>

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.