1

The code below works fine to copy the url to clipboard. It is a bit hacky as I use opacity:0 for input since I could not make it work with hidden input.

How can I change a link from "Copy Link" to "Copied!" after the click?

    function copytoclipboard() {
      var posturl = document.getElementById("posturl");
      posturl.select();
      document.execCommand("copy");
    }
    <a href="#" onclick="copytoclipboard()">Copy Link</a>

    <input type="text" value="request_original_url" id="posturl" style="opacity: 0;">
Nick M
  • 2,424
  • 5
  • 34
  • 57
Designer
  • 1,061
  • 1
  • 12
  • 26

2 Answers2

0

If you have jquery try this:

<a href="#" onclick="copytoclipboard(); $(this).text('Copied!');">Copy Link</a>

Without jquery:

<a href="#" onclick="copytoclipboard(); this.innerHTML='Copied!';">Copy Link</a>

Not the cleanest way to do it but it will change the link text.

By the way I am not sure whether your copytoclipboard() function works or will work across (all) browsers, perhaps you could try https://github.com/zenorocha/clipboard.js or something similar

Nick M
  • 2,424
  • 5
  • 34
  • 57
-1

clipboardjs library and the the code below worked

<script>
$(".clipboard-btn").click(function(e){
  e.preventDefault();
  $(this).html("Copied!");
});
</script>
Designer
  • 1,061
  • 1
  • 12
  • 26