Question

我无法让clipboard.js工作;我认为这是一个简单的“误解”，关于整个事情是如何工作的，因为我甚至无法像this Fiddle中那样得到最简单的例子......

我的具体问题是让它发挥作用：

HTML：

<button class="copyButton" 
        id="copyButtonId" 
        data-id="@item.Type" 
        data-clipboard-action="copy" 
        data-clipboard-target="#copy_@item.Type">
</button>

应该复制的div是：

   <div id="copy_@item.Type">
       @item.Type
       Name...: @item.Name
       Address: @item.Address
   </div>`

JS是：

$(function() {
$(document).on("click", ".copyButton", function() {
    var clipboard = new Clipboard(".copyButton"); 
    clipboard.destroy();
  });
});

我正在进入这个功能，但没有任何事情发生。我试过了：

clipboard.copy();

但这只是让我异常......

我可以得到我要复制的文字

var id= "copy_" + $(this).attr("data-id"); var source = ($("#" + agent).html());

但我应该只能使用clipboard.js来解决这个问题。

我无法得到任何例子，所以如果有人给我一个完整的例子，我会很高兴。我真的试图理解，我可能会过度思考整个事情并使其变得更加复杂。我不想要任何变通方法，因为我之前使用过，并认为这是一个很好的js解决方案...如果我能理解它：）

赞赏每一个正确方向的提示！

Answer 1

确保先添加正确的库;）

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

或您当地的min.js

我已将您的代码更改为：

var clipboard = new Clipboard('.copyButton');

clipboard.on('success', function(e) {
  console.log(e);
});

clipboard.on('error', function(e) {
  console.log(e);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

<div id="copy">
  @item.Type
  Name...: @item.Name 
  Address: @item.Address
</div>
    
<button class="copyButton" id="copyButtonId" data-id="@item.Type"
data-clipboard-action="copy" data-clipboard-target="div#copy">Copy!</button>

对我来说，现在复制<div>。如果它不适合你，请告诉我。

Answer 2

API 数据使用情况

import Clipboard from 'clipboard';
''''''
''''''
''''''
 var clipboard = new Clipboard('.class_name_of_the_div');
  clipboard.on('success', function (event) {});
  clipboard.on('error', function (evwnt) {});

data-clipboard-text={data.text}

无法让“clipboard.js”工作

2 个答案: