Menu
I just can't get this thing. How is ZeroClipboard supposed to work? Why does it need to move the flash-element over the copied text?
I've read this thing: http://code.google.com/p/zeroclipboard/wiki/Instructions
Can someone provide me a short snippet, which makes it possible to copy a text in variable to users clipboard, when user clicks a link. Is this even possible? I don't care, if it doesn't work on all browsers (IE6 for example).
I'm using jQuery.
409
The "minimal example" code given on the page you link to (http://code.google.com/p/zeroclipboard/wiki/Instructions#Minimal_Example) appears to be what you want. I've copied it here and altered it to demonstrate putting text into a variable and then copying that text to the clipboard, since that's what you're interested in. Note that, in real life, what you'd presumably want to do is call the clip.setText() part within some function, since you might not know, at the point when the page is first loaded, what text you want to copy.
<html>
<body>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div>
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
var myTextToCopy = "Hi, this is the text to copy!";
clip.setText( myTextToCopy );
clip.glue( 'd_clip_button' );
</script>
</body>
</html>
The flash element doesn't need to be "over the copied text"; it needs to be "glued" to whatever DOM element you want your user to manipulate -- most likely a button to click. The reason is that Javascript doesn't have access to the clipboard, so you need to use Flash instead. But Flash can only operate on the user's machine in response to a user's click -- so you "trick" the user into clicking on the Flash by making it an invisible overlay over an HTML element.
I'll note that while the particular example of copying to the user's clipboard is probably benign, this approach troubles me, as it wouldn't be hard to imagine the hidden flash element doing more malicious thing.
179
A slightly more complex jquery example. Copy the text when
<script language="JavaScript">
ZeroClipboard.setMoviePath('zeroclipboard/ZeroClipboard.swf');
$(document).ready(function(){
$(".clickme").each(function (i) {
var clip = new ZeroClipboard.Client();
var myTextToCopy = $(this).val();
clip.setText( myTextToCopy );
clip.addEventListener('complete', function (client, text) {
alert("Copied text to clipboard." );
});
clip.glue( $(this).attr("id") );
});
});
</script>
<?php
//these text boxes were in a loop
for($i=0;$i<10;$i++)
echo "<input type=\"text\" id=\"x$i\" class=\"clickme\" value=\"$value"\" />";
?>
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
