Trouble with ZeroClipboard

Question

Hi, I'm trying to use Zeroclipboard to copy stuff to the clipboard, but it doesn't seem to be working. My code:

HTML:

<textarea name="texter" id="texter"></textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />

Javascript:

<script type="text/javascript">
jQuery(document).ready(function(){

  var clip = new ZeroClipboard.Client();
  clip.setText('');  

   jQuery('#copy-button').click(function(){
  clip.setText(jQuery('#texter').val());
 }


});
</script>

What's wrong with this? Thansk!

Answer 1

Hi,

A few things.

Firstly, your brackets are slightly off. It should be:

jQuery(document).ready(function(){

  var clip = new ZeroClipboard.Client();
  clip.setText('');  

   jQuery('#copy-button').click(function(){
  clip.setText(jQuery('#texter').val());
 });
});

But that won't solve your problem.

Refer to ZeroClipBoard instructions

you need to 'glue' or link the flash movie to a dom element on the page. This is where the copied text will be stored. Then, you can't use jQuery for the click event (or if you can, I'm misunderstanding the documentation), but you can register a mousedown event to your button and bind it to the clip.

Applying this to your code.

    <script type="text/javascript">
        $(document).ready(function () {
            var clip = new ZeroClipboard.Client();

            clip.setText(''); // will be set later on mouseDown

            clip.addEventListener('mouseDown', function (client) {
                // set text to copy here
                clip.setText(jQuery('#texter').val());

                // alert("mouse down"); 
            });

            clip.glue('copy-button');
        });
</script>

This should work.

You can use this example completely without jQuery, but having it in the document ready is a nice compact place to make sure it executes only after the DOM is ready. And also using jQuery in place of getElementById.

Hope that helps.