如何用html和javascript创建复制按钮？
如何用html和javascript创建复制按钮？
提问于 2020-12-28 13:01:01
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>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-28 13:29:26
你只需要让系统知道你想要复制的文本的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>Stack Overflow用户
发布于 2020-12-28 13:10:49
你必须创建一个文本区，附加到正文并应用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65473187
复制相关文章
相似问题
腾讯云开发者
