Menu
I am trying to make ZeroClipboard API to work, but it looks like setText() function has no effect.
Simple example provided >here< works fine, but when I want to programatically call setText(), it does not work. Could you please help me, what is wrong with this code?
<html>
<body>
<script type="text/javascript" src="/resources/ZeroClipboard.js"></script>
<button id="my-button">Copy to Clipboard</button>
<script language="JavaScript">
ZeroClipboard.setDefaults({ moviePath: "/resources/ZeroClipboard.swf" });
var clip = new ZeroClipboard( $("button#my-button") );
clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not...
</script>
</body>
</html>
thanks a lot
816
Due to security issues, flash cannot access the clipboard unless the action originates from a click (or user interaction) with a flash object.
Because of this, just calling clip.setText will never work. Even calling it from a random button's onclick handler will not work, as it's not a click on a flash object.
That's just the way it is.
So what ZeroClipboard does is "glue" or add an invisible flash element to the object you are interested in. When you click the element, you are not firing the normal javascript onclick for that element, you are firing the flash video's onclick event.
Hope that makes sense.
So to "glue" a ZeroClipboard to an element, you can do as you have done, which is correct, or you can call:
clip.glue(element);
You can glue to multiple elements no problem.
So to set the text, the action has to originate from a click on a flash object. There's three ways to do this, as per the documentation.
You can set the button's "data-clipboard-text" attribute to whatever text you like, and this will be copied automatically.
e.g for your example (copies "copy this text!"):
<button id="my-button" data-clipboard-text="copy this text!">Copy to Clipboard</button>
Or you can set "data-clipboard-target" to any element's id, and ZeroClipboard will try to get that element's innerText;
e.g. (copies "Copy to Clipboard")
<button id="my-button" data-clipboard-target="my-button">Copy to Clipboard</button>
And finally, you can copy the text in a callback. If neither of those attributes are set, then the dataRequested callback will be called, in which you can set the text to whatever you want.
e.g (copies "Setting the text in a callback...")
<html>
<body>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="zc/ZeroClipboard.js"></script>
<button id="my-button">Copy to Clipboard</button>
<script language="JavaScript">
ZeroClipboard.setDefaults({ moviePath: "zc/ZeroClipboard.swf" });
var clip = new ZeroClipboard( $("button#my-button") );
clip.on( 'dataRequested', function ( client, args ) {
clip.setText("Setting the text in a callback...");
// Don't make this mistake, alert seems to prevent it from working
// alert("Clipboard should be set from click on " + this.id);
});
// Will never work
// clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not...
</script>
</body>
</html>
Sticking the alert in the callback stops it working for me for some reason, so just be aware of it.
So note that in all three examples, the copy event is from a click on the flash object. As far as I know, there is no way to copy it just from javascript without user interaction.
For more info, check out the ZeroClipboard instructions: https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
