How do I copy to the clipboard in JavaScript?

Asked : Nov 17

Viewed : 18 times

What is the best way to copy text to the clipboard (multi-browser)?

I have tried:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
        clipboardHelper.copyString(text);
    }
}

But in Internet Explorer, it gives a syntax error. In Firefox, it says the unsafe window is not defined.

A nice trick without using Flash: How does Trello access the user's clipboard?

javascript clipboard copy-paste 

Nov 17

4 Answers

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

answered Jan 13


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>

answered Jan 13


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

answered Jan 13


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

answered Jan 13


Login and Submit Your Answer
Browse other questions tagged  javascript  clipboard  copy-paste or ask your own question.