How do I copy to the clipboard in JavaScript?

Copy Text to Clipboard

Step 1) Add HTML:

<!-- The text field -->
<input type="text" value="Hello World" id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Step 2) Add JavaScript:

function myFunction() {
  	/* Get the text field */
  	var copyText = document.getElementById("myInput");

	
  	/* Select the text field */
  	copyText.select();
  	copyText.setSelectionRange(0, 99999); /* For mobile devices */

	
   	/* Copy the text inside the text field */
  	navigator.clipboard.writeText(copyText.value);

	
  	/* Alert the copied text */
  	alert("Copied the text: " + copyText.value);
}

Best Way to Copy the text inside the text field. Use navigator.clipboard.writeText.

<input type="text" value="Hello World" id="myId">
<button onclick="myFunction()" >Copy text</button>

<script>
function myFunction() {
  var copyText = document.getElementById("myId");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
}

</script>

I use this very successfully (without jQuery or any other framework).

function copyToClp(txt){
    var m = document;
    txt = m.createTextNode(txt);
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Warning

Tabs are converted to spaces (at least in Chrome).

A very common need when building websites is the ability to copy text to the clipboard with a single button click. Javascript can easily do this in five short steps, Create an <textarea> element to be appended to the document. Set its value to the string that we want to copy to the clipboard.,Use Document.execCommand('copy') to copy the contents of the <textarea> to the clipboard., Bear in mind that this method will not work everywhere, but only as a result of a user action (e.g. inside a click event listener), due to the way Document.execCommand() works.

const copyToClipboard = str => {
   const el = document.createElement('textarea');
   el.value = str;
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
};

const copyToClipboard = str => {
   const el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
   el.style.position = 'absolute';
   el.style.left = '-9999px';
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);
};