如何使用 html 和 javascript 創建復制按鈕？

Question

Hii 是 javascript 的新手，但通過我的所有努力，我編寫了一個 javascript 來復制<p></p>元素中的文本。 在我的網站中，我多次需要復制按鈕。 但是我的 javascript 只能用於一個復制按鈕。 如果我將它用於另一個復制按鈕，它將復制第一個按鈕各自的<p>/p>文本。 我的 javascript

const copyButton = document.querySelector('.copyButton');
const copyalert = document.querySelector('.copyalert');

copyButton.addEventListener('click', copyClipboard);

function copyClipboard() {
  var copystatus= document.getElementById("randomstatus");
// for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(copystatus);
    range.select();
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
  else if(window.getSelection) {
// other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(copystatus);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
}

我的 html

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">
       <p class=latest>life os good when hou have books</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
</div>
<div class="latestquotes">
       <p class=latest>Google is a open source library</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
<div class="latestquotes">
       <p class=latest>Cat is better than dog</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
  </div>
  </div>

Answer 1

您只需要讓系統知道您要復制的文本的id，例如p1、p2、p3。

請試試這個

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">

       <p><div id=p1>life os good when hou have books</div></p> 
       <button class="copyButton btn" onclick="copyToClipboard('p1')">Copy</button>

</div>

 

<div class="latestquotes">

       <p><div id=p2>Google is a open source library</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p2')">Copy</button>

   </div>

 

<div class="latestquotes">

       <p><div id=p3>Cat is better than dog</div></p>
       <button class="copyButton btn" onclick="copyToClipboard('p3')">Copy</button>

   </div>
  </div>
  </div>


<script>


function copyToClipboard(var1){
    let val = document.getElementById(var1).innerHTML;
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    alert('text copied to clipboard, please use Ctrl-V to paste the data');

  }  


</script>

Answer 2

你必須創建一個文本區域 append 到 body 並應用 execCommand function，然后你可以從你的 DOM 中刪除 textarea，試試這個：

 function copyToClipboard(){ let val = 'text to copy'; const selBox = document.createElement('textarea'); selBox.style.position = 'fixed'; selBox.style.left = '0'; selBox.style.top = '0'; selBox.style.opacity = '0'; selBox.value = val; document.body.appendChild(selBox); selBox.focus(); selBox.select(); document.execCommand('copy'); document.body.removeChild(selBox); alert('text copied to clipboard'); }

 <button type=button onclick="copyToClipboard()">Copy</button>

Answer 3

您不必依賴execCommand 。 現在有 剪貼板 API 。 所有現代瀏覽器都支持它。

剪貼板 API提供響應剪貼板命令（剪切、復制和粘貼）以及異步讀取和寫入系統剪貼板的能力。

復制按鈕的演示：

 const copy = async() => { return await navigator.clipboard.writeText(document.querySelector("#source").value); } document.querySelector("#copy").onclick = copy

 <textarea id="source"></textarea> <button id="copy">copier</button>

Answer 4

這是您需要的代碼，將 ID 名稱替換為您需要的名稱。 有了這個，您可以通過更改您需要的 ID 名稱和它們之間的關系（按鈕 ---> 段落標簽）獨立地為每個按鈕分配您需要的特定行為。

const copyButton = document.getElementById("copy-button");
const textToCopy = document.getElementById("output-text");

copyButton.addEventListener("click", () => {
 textToCopy.select();
 document.execCommand("copy");
});