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 😃.

---