Write to clipboard directly from javascript

[gegomu]

Minimal example

// This is what I need
var cpb = new Clipboard("#id");
cpb.copy("some text"); // Text is copied to clipboard

Expected behaviour

I wonder if it was possible to copy to clipboard directly from javascript, is it possible?

//-- this is my experiment
I try to delete the value copied to clipboard after a while, so I receive an event throw a function ...

var clipboard = new Clipboard("#myButton"); clipboard.on('success', function(e) { notifyCopy(e.text); } )

inside this function I try to delete the content of the clipboard
The function is (this is a test to see how to do it)

function notifyCopy(text){ var buttonVoid = document.getElementById("myButtonVoid"); if( buttonVoid .value == text ) return; setTimeout(function(){ buttonVoid .click(); }, 2000); }

myButtonVoid is a hidden button to force a copy event whith a empty value

This would delete the content of the clipboard overwriten the previos copied value

Actual behaviour

When the event copy is throw I get this error:

clipboard.min.js:7:6873
document.execCommand('cut'/'copy')It has been denied because it has not been called from within a
event handler user-generated short run.

So, I have two problems
1.- to write to the clipboad I need to create an extra element, add the clipboard copier to it and do some process, and finally it doesn't work
2.- I don't know if is there a direct copy method

Browsers affected

tested on Firefox 49.0.1

[djmattyg007]

I too was wondering about this recently. This library seems massively over-complicated when all you want to do is programmatically copy some text to the clipboard.

I ended up adapting the approach taken by this library into a very small class that have a hard dependency on binding events to buttons: https://github.com/djmattyg007/pictorials/blob/1c99a013fb9fa9fcd90d30c7f779e7f0fa345322/assets/js/clipboard.js

I'm not sure about the execCommand call being denied though, sorry.

[gegomu]

oh, thank you very much
I Think the problem about the copy is for some security reason in Firefox. I've try in IE and I get the some problem. Also, I've try a solution similar to your new example an d the problem is similar.
You can not save anything to clipboard if it is not in a thread started by the user directly
Thanks one more time

[zenorocha]

You can't programmatically copy text to clipboard due to security restrictions imposed by browser vendors, user interaction is required in order copy/cut to work. A simulated click event also does not work as this would enable clipboard poisoning.

P.S.: If clipboard.js isn't the right solution for you, feel free to use another library or roll your own implementation :)

[djmattyg007]

I think the salient point is that someone may wish for more control over how text is copied to the clipboard upon a user action, rather than the single solution provided by this library of just binding event listeners to buttons directly.

[zenorocha]

I think the salient point is that someone may wish for more control over how text is copied to the clipboard upon a user action

If you want more control over how text is copied see the "Advanced options" in the docs.

rather than the single solution provided by this library of just binding event listeners to buttons directly.

As I said before, user interaction is required in order copy/cut to work. This is a browser requirement, not mine.

[adam-lynch]

This is too bad, but I completely understand. It would make sense to stick this in the docs right? It would save people time who are glancing over the docs and prevent people from getting annoyed at you @zenorocha 😄

[cesarpachon]

yeah most of the time when you face a new requirement (like implementing clipboard functionality) your first attempt is to look if someone had already implemented some reusable library for that, in order to save some time. I bet that's why many of us arrive at clipboard.js at first. noticing that it doesn't fit all user cases forces you go deep in how the clipboard mechanism work (the thing you were trying to avoid at first) and at the end, adapt, use other or roll your own implementation. In my use case, for a canvas-webgl game, I ended just adding a "copy" listener to the body, with a evt.clipboard.setData and document.execCommand('copy'). for the triggering. worked very well. as @adam-lynch suggest, highlight the expected use case in the doc will be of help.

[zenorocha]

Hey guys, I added a proposal for this feature. Can you check #518?

Thanks!