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!";
});