Copy to clipboard with jQuery/js in Chrome
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:
If you don't mind IE/Safari, you can use following (new) API:
var promise = navigator.clipboard.writeText(newClipText)
Read the docs here
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/