Copy to clipboard with jQuery/js in Chrome

Question

I know this kind of question has been asked here for many times, including: How do I copy to the clipboard in JavaScript? or How to copy text to the client's clipboard using jQuery?, I'm narrowing the scope:

Condition:

1. works fine in Google Chrome (would be nice if cross-browser, but not necessary)
2. with no flash

Is there such a solution or workaround?

Answer 1

You can use either document.execCommand('copy') or addEventListener('copy'), or a combination of both.

1. copy selection on custom event

If you want to trigger a copy on some other event than ctrl-c or right click copy, you use document.execCommand('copy'). It'll copy what's currently selected. Like this, on mouseup for example:

elem.onmouseup = function(){
    document.execCommand('copy');
}

EDIT:

document.execCommand('copy') is supported only by Chrome 42, IE9 and Opera 29, but will be supported by firefox 41 (scheduled for september 2015). Note that IE will normally asks for permission to access the clipboard.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

2. copy custom content on copy triggered by user

Or, you can use addEventListener('copy'), this will interfere with copy event and you can put the content you want there. This suppose user triggers copy.

EDIT:

On Chrome, Firefox and Safari the event has the clipboardData object with setData method. On IE, the clipboardData object is a window property. So this can work on all major browsers provided you validate where is clipboardData.

 elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx

3. a bit of both

Using a combination, you can copy custom content on wanted events. So the first event triggers execCommand, then the listener interferes. For example, put custom content on click on a div.

  elem3.onclick = function () {
        document.execCommand('copy');
    }

   elem3.addEventListener('copy', function (e) {

    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});

Using this last one supposes that both approach are supported, as of July 2015, it works only on Chrome 43 (maybe 42 I couldn't test) and IE at least 9 and 10. With Firefox 41 supporting execcommand('copy'), it should work as well.

Note that for most of these methods and properties are declared as either experimental (or even deprecated for IE), so it's to be used carefully, but it looks like it's more and more supported.

Fiddle with all examples: https://jsfiddle.net/jsLfnnvy/12/