如何使用 html 和 javascript 创建复制按钮？

如何解决如何使用 html 和 javascript 创建复制按钮？

您好，我是 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>

解决方法

你必须创建一个文本区域，附加到正文并应用 execCommand 函数，然后你可以从你的 DOM 中删除文本区域，试试这个：

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>

,

您只需要让系统知道您要复制的文本的 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>