How to copy a text to the clipboard using ZeroClipboard?

Posted on

Question :

I found several articles saying that this type of action with JavaScript is something “risky” and many browsers prevent this from being done. Also, in the articles I read, they said the only way to do something similar is by using Flash.

So I went to Google for solutions and found the ZeroClipboard , but I was not able to use it. I tried it as follows:

    var client = new ZeroClipboard( $('button') );
    client.swfPath = 'ZeroClipboard.swf'; // está na pasta do projeto

     $('button').on('click', function(){
        client.setData("text/plain", "TESTE");

What’s wrong?

The button loses the hover effect, the flash is catching it normally. But when I click the button, the string “TEST” is not copied to the clipboard .

No error is displayed on the console.

Ultimately: Is there any other way to do this? Other plugins ?


Answer :

See if you are importing correctly or if you are omitting any code compared to this example:


    <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>


// main.js
var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
  // alert( "ZeroClipboard SWF is ready!" );

  client.on( "aftercopy", function( event ) {
    // 'this' === 'client'
    // '' === the element that was clicked = "none";
    alert("Copied text to clipboard: " +["text/plain"] );
  } );
} );

I do not know the ZeroClipboard , but in these links below you can get more references:

Leave a Reply

Your email address will not be published. Required fields are marked *