7

As you may surmise from this question, I'm not very good with javascript and am trying to get clipboard.js (https://clipboardjs.com/) working but can't. I followed instructions by copying clipboard.min.js into the scripts folder and then referenced it in my html file. Then I copied their button (and modified it a bit like this:

<button class="btn" id="test" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

In their setup instructions, they say this:

"Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements."

new Clipboard('.btn');

so then I made an event listener like this:

 $('#test').click(function() {
            var clipboard = new Clipboard('#test');
        });

But I don't know what I'm supposed to do with the clipboard variable once it's created. Or have I missed the point on what I'm supposed to do entirely?

aorcsik
  • 15,271
  • 5
  • 39
  • 49
BMills
  • 881
  • 1
  • 10
  • 24

3 Answers3

9

I think the way you have to use it is simply instantiating after the DOM is loaded:

$(function() {
    new Clipboard('#test');
});

This will convert the button (with id="test") into a clipboard copy button. And pressing it will put the value of data-clipboard-text on the clipboard.

You don't even need to store this instance, unless you want to interact with the button later in the code.

aorcsik
  • 15,271
  • 5
  • 39
  • 49
2

new clipboardJS(“.btn”);

Check where you initialize the clipboard function. It should be new clipboardJS not new clipboard

Danny Coder
  • 33
  • 6
1

Lets say #test is a textarea. We want to copy its value to clipboard the moment we click on it:

new ClipboardJS("#test", {
    text: function(trigger) {
        // do any other thing here
        return trigger.value.trim() ;
    }
});
Amir Hossein Baghernezad
  • 3,616
  • 27
  • 28