How to use clipboard.js

Question

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?

Answer 1

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.

Answer 2

new clipboardJS(“.btn”);

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

Answer 3

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() ;
    }
});