如何使用HTML和JavaScript创建复制按钮？

Question

我是新手，正在学习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>

- user14881722

---

一种不同的方法：navigator.clipboard.writeText(newClipText) 注意：请检查浏览器兼容性。 - Ragul CS

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>

- Ken Lee

---

请问您能否在不使用jQuery的情况下实现吗？ - user14881722

没问题。我已经修改了我的答案 - 不使用jquery。请再试一次。 - Ken Lee

对我来说可以工作，我不得不将.innerHTML更改为具有输入标记的元素的值。 - kztd

Answer 2

你需要创建一个文本区域，将其添加到文档体中，并应用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>

- sonEtLumiere

---

不，它不起作用。如果我点击任何按钮，它都会复制“要复制的文本”单词。 - user14881722

你可以将参数传递给函数copyToClipboard(argument){let val = argument}，其中argument为参数名。 - sonEtLumiere

虽然我得到了答案，但我无法理解你的代码。 - user14881722

如果你想更深入地了解它，它与Dean Taylor在这里展示的代码非常相似。 - Tiago Martins Peres

Answer 3

由于document.execCommand('copy')已被弃用，您可以使用navigator.clipboard.writeText，只需检查浏览器兼容性，就像Ragul CS所说的那样。有关更多信息，请查看此问题。

copyButton.addEventListener("click", async function () {
    const code = 'text to copy';
    await navigator.clipboard.writeText(code);
});

- Renato C.Francisco

Answer 4

使用这个

<button @click="copyMe('Copied')">Copy Your Code</button>

'''''

function copyMe(){
  navigator.clipboard.writeText("Copy Clipboard");
}

'''''''

- Mohammad Nadr