I can't get the clipboard.js to work; I think it's a simple "misunderstanding" about how the whole thing works, since I'm not even able to get the most simple example to work properly like in this Fiddle...

My specific problem is getting this to work:

HTML:

<button class="copyButton" 
        id="copyButtonId" 
        data-id="@item.Type" 
        data-clipboard-action="copy" 
        data-clipboard-target="#[email protected]">
</button>  

The div that should be copied is this:

   <div id="[email protected]">
       @item.Type
       Name...: @item.Name
       Address: @item.Address
   </div>`

The JS is:

$(function() {
$(document).on("click", ".copyButton", function() {
    var clipboard = new Clipboard(".copyButton"); 
    clipboard.destroy();
  });
});

I'm getting into the function, but nothing is happening. I tried:

clipboard.copy();

but that just throws me an exception...

I can get the text, that I want to copy

var id= "copy_" + $(this).attr("data-id"); var source = ($("#" + agent).html());

But I should be able only to work it out by using clipboard.js.

I can't get any examples to work, so I would be happy if someone shows me a complete example. I've really tried to understand and I may be overthinking the whole thing and making this more complicated than it is. I don't want any workarounds, as I used that before and think this is a great js-solution... If I could just understand it :)

Every hint into the right direction is appreciated!

I can't get the clipboard.js to work; I think it's a simple "misunderstanding" about how the whole thing works, since I'm not even able to get the most simple example to work properly like in this Fiddle...

My specific problem is getting this to work:

HTML:

<button class="copyButton" 
        id="copyButtonId" 
        data-id="@item.Type" 
        data-clipboard-action="copy" 
        data-clipboard-target="#[email protected]">
</button>  

The div that should be copied is this:

   <div id="[email protected]">
       @item.Type
       Name...: @item.Name
       Address: @item.Address
   </div>`

The JS is:

$(function() {
$(document).on("click", ".copyButton", function() {
    var clipboard = new Clipboard(".copyButton"); 
    clipboard.destroy();
  });
});

I'm getting into the function, but nothing is happening. I tried:

clipboard.copy();

but that just throws me an exception...

I can get the text, that I want to copy

var id= "copy_" + $(this).attr("data-id"); var source = ($("#" + agent).html());

But I should be able only to work it out by using clipboard.js.

I can't get any examples to work, so I would be happy if someone shows me a complete example. I've really tried to understand and I may be overthinking the whole thing and making this more complicated than it is. I don't want any workarounds, as I used that before and think this is a great js-solution... If I could just understand it :)

Every hint into the right direction is appreciated!

• javascript
• clipboard
• clipboard.js

• Maybe the copier only works for input fields (or textareas) and not divs? – Victoria S. Commented Nov 26, 2015 at 13:34
• the example from the site works fine with div (github.com/zenorocha/clipboard.js/blob/master/demo/…). just when I try it, it's not – marS Commented Nov 26, 2015 at 13:46
• Not even when you just copy the whole thing? – Victoria S. Commented Nov 26, 2015 at 13:55
• thats what I put into the fiddle, it's the source code from the example... – marS Commented Nov 26, 2015 at 14:00
• and you're absolutely sure you've added the library? Because I don't see that in the fiddle. (apologies if you have) – Victoria S. Commented Nov 26, 2015 at 14:04

3 Answers 3

Make sure you add the right library first ;)

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

Or your local min.js

I've altered your code to this:

<div id="copy">
    @item.Type
    Name...: @item.Name 
    Address: @item.Address
</div>

<button class="copyButton" id="copyButtonId" data-id="@item.Type"
 data-clipboard-action="copy" data-clipboard-target="div#copy">Copy!</button>

and the js:

var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

With me it copies the div now. Let me know if it doesn't for you.

Incase of API data use

import Clipboard from 'clipboard';
''''''
''''''
''''''
 var clipboard = new Clipboard('.class_name_of_the_div');
  clipboard.on('success', function (event) {});
  clipboard.on('error', function (evwnt) {});

data-clipboard-text={data.text}

Sorry, I haven't got time to read all but for the library https://www.npmjs.com/package/clipboard you can use

import ClipboardJS from 'clipboard'

and then new ClipboardJS('.btn')

or check if this import Clipboard from 'clipboard' works specially for your solution