如何使用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

您必须创建一个文本区域，附加到正文并应用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>

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);
});

Answer 4

使用此

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

目标

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