Skip to content Skip to sidebar Skip to footer

Change Button Text After Click W/ Clipboard.js

I'm using clipboard.js to copy some text on my webpage. I've go that working great but I'd like to change the button text after a user clicks to copy the text. Here's what I have s

Solution 1:

You could listen to the success event of the clipboard and change the text.

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

Post a Comment for "Change Button Text After Click W/ Clipboard.js"