can't get "clipboard.js" to work

Question

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="#copy_@item.Type">
</button>

The div that should be copied is this:

   <div id="copy_@item.Type">
       @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!

Maybe the copier only works for input fields (or textareas) and not divs? — Victoria S., Nov 26 '15 at 13:34
the example from the site works fine with div (https://github.com/zenorocha/clipboard.js/blob/master/demo/target-div.html). just when I try it, it's not — marS, Nov 26 '15 at 13:46
thats what I put into the fiddle, it's the source code from the example... — marS, Nov 26 '15 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., Nov 26 '15 at 14:04
I just pasted `` in the html of your fiddle and it copies **hello** — Victoria S., Nov 26 '15 at 14:06
yeah, you're right. Got the wrong link into External Resources — marS, Nov 26 '15 at 14:07

Victoria S. · Accepted Answer · 2020-10-21T13:57:09.963

12

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.

edited Oct 21 '20 at 13:57

answered Nov 26 '15 at 14:21

Victoria S.

549
1
6
20

Well,it get copied with your solution, but the thing is: always the same one, thats why I need different ID's. I got a lot of different data loaded, will see if I get it from here – marS Nov 26 '15 at 14:31
With me it had issues with the format of the id, so be careful with those. :) – Victoria S. Nov 26 '15 at 14:33
it just selects the text it doesnt really copy it. – Brana May 28 '17 at 09:18
It selects the text AND copies it. Try pasting somewhere after clicking the button. (https://jsfiddle.net/wm9ce12m/) I made the fiddle again for you. – Victoria S. May 31 '17 at 11:45
For those still not working please check the answer here [Illegal constructor in chrome when using clipboard API?](https://stackoverflow.com/questions/30419039/illegal-constructor-in-chrome-when-using-clipboard-api) – Bhautik Jun 29 '21 at 05:17

score 0 · Answer 2 · answered Mar 22 '21 at 17:57

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}

score -2 · Answer 3 · answered Dec 24 '20 at 11:02

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

can't get "clipboard.js" to work

3 Answers3