使用Clipboard.js复制span文本

Copy span text using Clipboard.js

本文关键字：span 文本 复制 js Clipboard 使用      更新时间：2023-09-26

我使用的是clipboard.js，需要通过单击按钮在span中复制文本。有办法做到这一点吗？

HTML:

<span id="spanId">text here</span>
<input type="button" class="buttonClass" value="Copy" data-clipboard-target="#spanId" />

解决方案可以是：

// create a new instance of Clipboard plugin for the button element
// using the class selector: .buttonClass
var clipboard =  new Clipboard('.buttonClass');
// when text is copied into clipboard use it
clipboard.on('success', function(e) {
  $('#log').text('Text copied into clipboard is: <' + e.text + '>');
  e.clearSelection();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<span id="spanId">text here</span>
<input type="button" class="buttonClass" value="Copy" data-clipboard-target="#spanId"/>
<p id="log"></p>

您只需要实例化一个新的剪贴板。在这种情况下，您应该编写new Clipboard(".buttonClass")，因为这是您的按钮所具有的类。您提供的标记在其他方面是完全有效的。我制作了一个JSFiddle，你可以在这里查看。

如果你还有其他问题，我发现clipboard.js文档非常有用。

相关文章：