How to actually use ZeroClipboard in jQuery?

问题

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.

回答1:

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.

回答2:

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"\" />";

?>

回答3:

This code only works in my setup together with chrome when I have a tag in my body-area like

<script type="text/javascript" src="js-file-doesnt-exists-404.js"></script>
<div>
......
some stuff here
......
....
</div>
...some more stuff....
<the button>
....

when the file-include is removed the button is not working.... really strange

回答4:

The current version of ZeroClipboard actually contains a bug that would cause an JS error using the script suggested by JacobM - in the following scenario:

Create a reference to the ZeroClipboard.Client() returned from the new constructor. (e.g. var clip = new ZeroClipboard.Client();)
Set the text by doing clip.setText("string");
Change the DOM (hide the flash movie or an ancestor element)
Set the text again by doing clip.setText("some other string")

To avoid causing errors, the mouseover event listener should instead be used to set the text:

<html>
<body>
    <script type="text/javascript" src="ZeroClipboard.js"></script>

    <div id="d_clip_button">Copy To Clipboard</div>

    <script language="JavaScript">
        var clip = new ZeroClipboard.Client(),
            myTextToCopy = "Hi, this is the text to copy!";                    
        clip.glue('d_clip_button');
        clip.addEventListener('onMouseOver', clipboardEvent);
        function clipboardEvent() {
            clip.setText( myTextToCopy );
        }
    </script>
</body>
</html>

来源：https://stackoverflow.com/questions/2805009/how-to-actually-use-zeroclipboard-in-jquery

标签

jquery

zeroclipboard