9行代码轻松复制内容至剪切板

2024-02-10 11:01:44

掌握9行代码，即可轻松复制内容至剪切板，提升您的工作效率和学习成果。本文将以简单易懂的语言，详细介绍如何实现这一功能。

第一步：创建Range对象

var range = document.createRange();

这一行代码创建了一个Range对象，它是Selection API的核心组成部分。Range对象允许您选择和操作文档中的文本。

第二步：选择内容

range.selectNodeContents(document.getElementById("content"));

这一行代码将选择指定元素（在本例中为“content”元素）中的所有内容。您也可以使用range.setStart()和range.setEnd()方法来选择特定范围的文本。

第三步：复制内容

var selection = window.getSelection();
selection.addRange(range);
document.execCommand("copy");

这三行代码将所选内容添加到Selection对象中，然后执行“copy”命令，将所选内容复制到剪切板。

示例

<div id="content">
  <h1>标题</h1>
  <p>段落</p>
</div>

<button onclick="copyContent()">复制内容</button>

<script>
function copyContent() {
  var range = document.createRange();
  range.selectNodeContents(document.getElementById("content"));
  var selection = window.getSelection();
  selection.addRange(range);
  document.execCommand("copy");
}
</script>