通過鏈接使用Rails和Javascript復制到剪貼板

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

剪貼板js庫和下面的代碼工作

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