js点击按钮复制某块内容
时间: 2023-09-05 19:12:56 浏览: 96
js实现点击按钮复制文本功能
以下是使用JavaScript实现点击按钮复制某块内容的示例代码:
HTML代码:
```
<div id="content">这是要复制的内容</div>
<button id="copy-btn">复制内容</button>
```
JavaScript代码:
```
// 获取要复制的内容和复制按钮
var content = document.getElementById("content");
var copyBtn = document.getElementById("copy-btn");
// 绑定点击事件
copyBtn.addEventListener("click", function() {
// 创建一个临时文本框
var tempInput = document.createElement("textarea");
// 把要复制的内容赋值给临时文本框
tempInput.value = content.innerText;
// 添加临时文本框到页面中
document.body.appendChild(tempInput);
// 选中临时文本框中的内容
tempInput.select();
// 执行复制命令
document.execCommand("copy");
// 移除临时文本框
document.body.removeChild(tempInput);
// 弹出复制成功提示框
alert("内容已复制到剪贴板!");
});
```
当点击按钮时,JavaScript会创建一个临时文本框,把要复制的内容赋值给它,然后把临时文本框添加到页面中,选中文本框中的内容,执行复制命令,最后移除临时文本框。这样就可以实现点击按钮复制某块内容的功能。
阅读全文