Clipboard API

navigator.clipboard 是 W3C 标准 API，异步、安全、支持多种数据类型，是目前最优方案。

代码实现

index.js

async function copyText(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log("复制成功！");
    } catch (err) {
        console.error("复制失败：", err);
    }
}

优点

1. 异步非阻塞，不影响页面性能。
2. 支持文本、图片、文件等多种数据类型。
3. 安全性高，浏览器原生支持，无兼容性隐患。

缺点

1. 兼容性：仅支持 Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+（不支持 IE）；
2. 安全限制：
   • 必须在 HTTPS 环境 下使用（localhost/127.0.0.1 开发环境除外）
   • 必须由 用户交互触发（如 click、touch 事件等）禁止页面加载时自动复制（如 setTimeout、setInterval 等）
   • 部分浏览器可能会询问用户权限

Document.execCommand

这种方式兼容性更好，有一些网站没有配置 SSL 证书导致无法使用 navigator.clipboard，可使用下方代码作为平替方案。

代码实现

index.js

function copyTextToClipboardLegacy(text) {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "absolute";
    textarea.style.left = "-9999px";

    document.body.appendChild(textarea);
    textarea.select();

    try {
        const success = document.execCommand("copy");
        if (success) {
            console.log("复制成功！");
        } else {
            console.error("复制失败：命令执行失败");
        }
    } catch (err) {
        console.error("复制失败：", err);
    } finally {
        // 移除临时元素（避免内存泄漏）
        document.body.removeChild(textarea);
    }
}

优点

1. 兼容性极好：支持 IE11+、所有现代浏览器。
2. 无需 HTTPS 环境（HTTP 也可使用）。
3. 实现简单，无需处理异步逻辑。

缺点

1. 同步操作：复制大量内容时可能阻塞页面。
2. 功能有限：仅支持文本复制，不支持图片 / 文件。
3. 已被废弃：execCommand 属于过时 API（虽然目前多数浏览器仍支持，但未来可能移除）。
4. 需创建临时 DOM 元素，略显繁琐。
5. 部分浏览器可能会有兼容性细节问题（如移动设备选中失效）。