How to copy text using JavaScript?

Published July 16, 2020

To copy text programmatically using javascript, you need to use the document.execCommand('copy') method.

Let's study this with an example.

Consider this HTML,

<input id="copyInput" type="text" /> <button id="copyButton">Copy Text</button>

with an input tag and a button to copy text from the input tag.

Now let's write the javascript for this.

We need to get a reference to both the input and button tags first.

// get reference to both
// input tag and button tag
const input = document.getElementById("copyInput");
const copyBtn = document.getElementById("copyButton");

Then we need to add a click event listener so that when the user clicks on the button it will copy the text from the input tag.

// get reference to both
// input tag and button tag
const input = document.getElementById("copyInput");
const copyBtn = document.getElementById("copyButton");

// atttach click event listenter to button tag
button.addEventListener("click", () => {
  // do the copying of text here
});

Now for the computer to copy we need to select the text inside the input tag first and then execute the document.execCommand('copy') method.

// get reference to both
// input tag and button tag
const input = document.getElementById("copyInput");
const copyBtn = document.getElementById("copyButton");

// atttach click event listenter to button tag
button.addEventListener("click", () => {
  /* do the copying of text here */

  // first select the text inside the input tag
  input.select();
  input.setSelectionRange(0, 99999); // polyfill for mobile devices

  // execute the copy method
  document.execCommand("copy");

  // optional ==> after copying change the button text to Copied!
  copyBtn.textContent = "Copied!";
});

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter