如何使用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的值放在剪贴板上。

您甚至不需要存储此实例，除非您希望稍后在代码中与按钮交互。