JS 复制内容到剪切板案例

[TOC]

### 1. 使用 document.execCommand 实现复制

document.execCommand('copy') 是一段用于复制文本到剪贴板的JavaScript代码。这行代码是早期用于在网页中实现复制操作的一种方式，但已经不推荐使用了，因为它是一个废弃的 API，并且在现代浏览器中不再被广泛支持。

这行代码的作用是执行文档（通常是网页上的文本内容）的复制命令，将选定的文本复制到用户的剪贴板中。但由于安全和隐私方面的考虑，现代浏览器限制了对剪贴板的访问，因此这种方法可能不会正常工作或需要用户明确的操作。

**实现代码：**

欲把西湖比西子，淡妆浓抹总相宜。 </p>
    <button onclick="copyContent()">复制</button>
</div>
<script type="text/javascript">
    function copyContent() {
        var con = document.getElementsByTagName("p")[0].innerText;
        var ta = document.createElement("textarea");
        ta.value = con
        ta.style.opacity = 0
        document.body.appendChild(ta)
        ta.select();  //选中内容
        document.execCommand('copy')  //将内容复制到剪切板上
        ta.remove()   //删除创建的textarea元素
    }
</script>
</html>
```

> **Tips：**
document.execCommand这个API已经在新版浏览器中被标记为弃用了，但为了兼容老板的IE浏览器还是可以使用的

### 2. 使用 Clipboard API 实现复制

借助`navigator.clipboard`中的两个API可以实现内容的复制与粘贴，writeText()方法将内容复制到剪切板上，readText()方法将剪切板的内容粘贴到指定的目标元素上，writeText()和readText()都是异步的API，由于浏览器的安全限制，使用readText()时，会弹出一个确定窗口，需要用户明确粘贴操作

**实现代码：**

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
</hred>
<div id="app">
    <h1>借助Textarea实现复制</h1>
    <p>水光潋滟晴方好，山色空蒙雨亦奇。
        欲把西湖比西子，淡妆浓抹总相宜。 </p>
    <textarea id="paste-target"></textarea> <br /><br />
    <button onclick="ClipboardContent()">Clipboard复制</button>
    <button onclick="pasteContent()">Clipboard黏贴</button>
</div>
<script type="text/javascript">
    function ClipboardContent() {
        // 检查浏览器是否支持 Clipboard API
        if (navigator.clipboard) {
            var con = document.getElementsByTagName("p")[0].innerText;
            navigator.clipboard.writeText(con).then(function () {
                console.log("文本已成功复制到剪贴板");
            }).catch(function (err) {
                console.error("复制文本到剪贴板时出错: ", err);
            });
        } else {
            console.error("浏览器不支持 Clipboard API.");
        }
    }
    function pasteContent() {
        if (navigator.clipboard) {
            // 尝试从剪贴板中读取文本
            navigator.clipboard.readText().then(function (clipboardText) {
                // 将读取到的文本粘贴到页面上的某个元素中
                var targetElement = document.getElementById("paste-target");
                if (targetElement) {
                    targetElement.textContent = clipboardText;
                }
            }).catch(function (error) {
                console.error("从剪贴板读取文本时出错: ", error);
            });
        } else {
            console.error("浏览器不支持 Clipboard API.");
        }
    }
</script>
</html>
```