Copy to clipboard with jQuery/js in Chrome

问题:

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?

回答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/

回答2:

I just find another amazing repo on Github.

Modern copy to clipboard. No Flash. Just 3kb gzipped

https://github.com/zenorocha/clipboard.js

Browser Support:

回答3:

Variable string can copy to clipboard using below js code.

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');

回答4:

Actually for those figuring this out i got it to work in chrome based on @JulianGregoire s answer.

I rewrote the code to make it a bit better in my opinion:

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}

回答5:

Beware: I tried the exact same script of Julien Grégoire, however it wasn't triggering the oncopy event listener. The reason, I had user-select CSS for the body-tag.

So make sure you remove it, or set it to initial on the element the event listener is attached to.

Example: https://jsfiddle.net/faimmedia/jsLfnnvy/80/

回答6:

If you're using knockout, like me (for some reason I still am), you'll want to take a look at this question/answer:

How to make KnokoutJS and ClipboardJS work together?

回答7:

function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
}

Then call the function with the text and that should work.