如何使用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>

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

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

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

new clipboardJS(“.btn”);

检查初始化剪贴板功能的位置。应该是 new clipboardJS 而不是 new clipboard

Answer 3

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

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

如何使用clipboard.js

How to use clipboard.js

javascript

jquery

clipboard.js