javascript - 如何使用 html 和 javascript 创建复制按钮?
问题描述
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>
解决方案
您只需要让系统知道您要复制的文本的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>
推荐阅读
- git - 使用 Jenkins 从共享文件夹上的存储库中提取 Git 时挂起
- deployment - 如何一步部署 SSIS 项目和环境变量
- python - 如何在使用 Aiohttp 库执行函数之前返回响应?
- c# - 绑定到 ObservableCollection 内对象的 ObservableCollection 属性
- javascript - 如何修复 googleappmaker 中的“未定义 DocumentApp”
- c# - 将 DataGridViewButtonCell 转换为类型 DataGridViewDisableButtonCell 时出错
- python - 嵌入在合并中的 for 循环
- mysql - MySql - 在某个单词之后选择一些字符并将其添加到另一列
- c++ - 如何找到数组左右两侧的最大元素?
- java - Spring DI 同时具有两个构造函数