单击 w/ clipboard.js 后更改按钮文本

Question

我正在使用 clipboard.js 复制我网页上的一些文本。我的效果很好，但我想在用户点击复制文本后更改按钮文本。

这是我目前的情况：一个 div 与文本：

<div #landingpage>
TEST TEXT
</div>

一个按钮：

<button class="btn" id="copy-button" data-clipboard-target="#landingpage" 
onclick="myFunction()">Copy Content</button>

和javascript：

<script>
(function(){
  new Clipboard('#copy-button');
})();
</script>

如何在单击后将按钮文本更改为 "Copied"，然后在几秒钟后将其恢复为 "Copy"。

谢谢。

Answer 1

您可以收听 clipboard 的 success 事件并更改文本。

JS

$(function() {
  var $btnCopy = $('#copy-button');

  $btnCopy.on('click', function() {
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
      $btnCopy.text('Copied');

      setTimeout(function() {
        $btnCopy.text('Copy');
      }, 2000);
    });
  });
});

HTML

<div id="landingpage"> TEST TEXT  </div>

<button class="btn" id="copy-button" data-clipboard-target="#landingpage">Copy Content</button>

Check Fiddle

单击 w/ clipboard.js 后更改按钮文本

change button text after click w/ clipboard.js

html

javascript

jquery

clipboard.js