單擊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>

如何在單擊后將按鈕文本更改為“已復制”，然后在幾秒鍾后將其恢復為“復制”。

謝謝。

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>

檢查小提琴