如何使用clipboard.js

Question

正如您从这个问题中推测的那样，我对javascript不是很在行，我试图让clipboard.js (https://clipboardjs.com/)工作，但无法工作，我按照指示将clipboard.min.js复制到脚本文件夹中，然后在html文件中引用它。然后，我复制了他们的按钮(并对其进行了如下修改：

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

在他们的设置说明中，他们说：

“现在，您需要通过传递DOM选择器、HTML元素或HTML元素列表来实例化它。”

new Clipboard('.btn');

然后我做了一个这样的事件侦听器：

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

但是我不知道一旦创建了剪贴板变量，应该如何处理它。还是我错过了我该怎么做的重点？

Answer 1

我认为您必须使用它的方式只是在加载DOM之后实例化：

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

这将将按钮(与id="test")转换为剪贴板复制按钮。按下它将把data-clipboard-text的值放在剪贴板上。

您甚至不需要存储此实例，除非您希望与代码后面的按钮进行交互。

Answer 2

新clipboardJS(“.btn”)；

检查初始化剪贴板函数的位置。它应该是新的clipboardJS，而不是新的剪贴板

Answer 3

让我们假设#test是一个textarea。我们希望在单击它时将它的value复制到剪贴板上：

new ClipboardJS("#test", {
    text: function(trigger) {
        // do any other thing here
        return trigger.value.trim() ;
    }
});