Select and Copy input text onclick?

Question

I've actually seen a few questions about this, most of them are from at least 5 or 6 years ago.

I want to have an input box:

<input id="copy-text" type="text" value="Click this text!">

Here's the JavaScript I've been trying to work with:

document.getElementById("copy-text").onclick = function() {
  this.select();
  execCommand('copy');
  alert('This is a test...');
}

I know my code doesn't work. If I remove execCommand('copy'); then the alert() pops up, but it seems to be hitting an error at that line. I've tried making it this.execCommand('copy'); as well, not really sure what to do here.

Fiddle: https://jsfiddle.net/6v24k4sk/

The idea is that I want the user to click the input box, it will select all the text, and then copy it to the clipboard.

Any ideas?

Answer 1

You should put a document. in front of the execCommand.

document.getElementById("copy-text").onclick = function() {
    this.select();
    document.execCommand('copy');
    alert('This is a test...');
}

Here you can find a working example: https://jsfiddle.net/9q3c1k20/

edit:

The function also returns whether this functionality is supported in the browser. I think you should check the value, because execCommand still has no final specification and is therefore not guaranteed to work in all browsers.