document.execCommand('copy') not working on Chrome
I am not really clear as to what really happens here...
It seems there is a mismatch as to what should be used between the value and the textContent properties of your textarea.
Chrome seems to always use value, while Firefox uses textContent.
Since chrome doesn't look at the textContent property, Range#selectNodeContents will select nothing on this browser...
However, you can use Range#selectNode which should return the same result in this case, and will workaround the issue.
document.getElementById('btn').addEventListener('click', function(){ var textarea = document.createElement('textarea'); textarea.textContent = 'copied text'; document.body.appendChild(textarea); var selection = document.getSelection(); var range = document.createRange();// range.selectNodeContents(textarea); range.selectNode(textarea); selection.removeAllRanges(); selection.addRange(range); console.log('copy success', document.execCommand('copy')); selection.removeAllRanges(); document.body.removeChild(textarea); })<button id="btn">copy</button><textarea>You can paste here</textarea>
For people reading this question in 2020, if you're having trouble with document.execCommand('copy'), you may want to try using the Clipboard API.
Per Mozilla:
There are two ways browser extensions can interact with the systemclipboard: the Document.execCommand() method and the modernasynchronous Clipboard API.
Also per Mozilla, document.execCommand() is now obsolete:
This feature is obsolete. Although it may still work in some browsers,its use is discouraged since it could be removed at any time. Try toavoid using it.
With the Clipboard API, writing text to the clipboard is particularly easy:
const textToCopy = 'Hello there!'navigator.clipboard.writeText(textToCopy) .then(() => { alert(`Copied!`) }) .catch((error) => { alert(`Copy failed! ${error}`) })More info:
Mozilla's discussion of the two clipboard systems
Google's discussion of the two clipboard systems
I have found that you can't dynamically insert a input field, insert some text, and then copy it to the clipboard. I was able to copy text from an existing input tag.