7

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?

Tasos K.
  • 7,669
  • 7
  • 38
  • 57
Matthew
  • 643
  • 1
  • 7
  • 15
  • @StephenP no, I'm not very good with JS, I don't even know what that means to be honest with you. Maybe you can provide some insight? – Matthew Mar 24 '16 at 22:17
  • Possible duplicate of [How do I copy to the clipboard in JavaScript?](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – Trevor Clarke Mar 24 '16 at 22:18
  • @Matthew depends on your browser for how to use the developer tools, but try right-click menu and pick "Inspect" or "Inspect Element"; try F12 for IE. BTW, `this.select()` clears the text that was selected (in your fiddle) so the whole content is copied, not the selection. Remove that line and you can click-drag to select text in the textbox, and when you release the mouse button only the selected text is copied to the clipboard. – Stephen P Mar 24 '16 at 22:25
  • @StephenP thanks! Sorry I know how to enter the dev tools, just don't know what that phrase meant you provided that you saw in the console. Thanks for the tip! I'm dynamically making a link with php, so I want everything there to be selected and copied. – Matthew Mar 24 '16 at 22:32

2 Answers2

16

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.

kogelnikp
  • 407
  • 7
  • 10
  • Perfect! Out of curiosity, and so I can understand it, why does select() have to be this.select() but execCommand() has to be document.execCommand() but alert() doesn't need anything in front of it? – Matthew Mar 24 '16 at 22:18
  • 3
    @Matthew since you are in a function that is an (onclick) event handler, `this` refers to the object on which the event occurred. In this case, `this` is the `` control, so you call `.select()` on that object. The `execCommand` function is a property of the `document` object, thus `document.execCommand()` ... while plain unqualified `execComand()` is called on the _window_ object, and there is no `window.execCommand` function. – Stephen P Mar 24 '16 at 22:30
  • Thanks for information, I appreciate it. I'm finding JS to be an interesting language to learn - it almost feels messy sometimes. – Matthew Mar 24 '16 at 22:46
0

Use this function with your copy_btn (without onclick function).

function function_name() {
    var c = document.getElementById("copy");
    c.select();
    document.execCommand('copy');
}
Kumavat vijay
  • 1
  • 2