时间戳

首页 > 解决方案 > 使用 Clipboard.js 按类更改按钮文本

javascript - 使用 Clipboard.js 按类更改按钮文本

问题描述

单击 w/clipboard.js 后，我发现了此 更改按钮文本

但它会导致错误：$ 不是函数，请参见下面的屏幕截图

https://www.awesomescreenshot.com/image/8535357?key=55d48e1db3b3e996966454c551958fac

在某些人通过类而不是ID单击按钮后，如何使用 Clipboard.js 更改按钮文本？

例如，按钮文本将更改为“已复制”，并在一段时间后自动更改回原始文本。

下面是我的代码：

<button
  class="copyElement"
  data-clipboard-text="123"
>
  <span>Take Me There</span>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script>new ClipboardJS('.copyElement');</script>

标签： javascriptclipboard.js

解决方案

不使用success事件jQuery

https://clipboardjs.com/#events

var clipboard = new ClipboardJS('.copyElement')

clipboard.on('success', function(e) {
    let oldtext = e.trigger.textContent
    e.trigger.textContent = 'Copied!'
    setTimeout(() => e.trigger.textContent = oldtext, 2000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<button class="copyElement" data-clipboard-text="123">
  <span>Take Me There 1</span>
</button>

<button class="copyElement" data-clipboard-text="456">
  <span>Take Me There 2</span>
</button>

推荐阅读