Question

下面的代码可以很好地将URL复制到剪贴板。由于我使用 opacity：0 进行输入，因此有点笨拙，因为我无法使其与隐藏输入配合使用。

如何将链接从“复制链接”更改为“已复制！”点击之后？

    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;">

Answer 1

如果您有jquery，请尝试以下操作：

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

没有jquery：

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

这不是最干净的方法，但会更改链接文本。

顺便说一句，我不确定您的copytoclipboard（）函数是否可以工作，或者是否可以在（所有）浏览器上工作，也许您可以尝试https://github.com/zenorocha/clipboard.js或类似的东西

Answer 2

clipboardjs库和下面的代码有效

<script>
$(".clipboard-btn").click(function(e){
  e.preventDefault();
  $(this).html("Copied!");
});
</script>

通过链接使用Rails和Javascript复制到剪贴板

2 个答案: