Javascript 实现复制（Copy）动作方法大全

在 Web 开发过程中，经常需要实现复制文本、复制图片等功能。本文将介绍 Javascript 实现复制操作的几种方法。

一、使用 document.execCommand()

document.execCommand() 是一个常用的实现复制操作的方式。它可以执行不同的命令，包括复制命令，以实现文本、图片等资源的复制。

document.execCommand('copy');

使用此方法需要实现以下步骤：

1. 创建一个临时的textarea元素，将要复制的内容作为其value属性值。
2. 将临时 textarea 元素添加到文档中，然后选定文本。
3. 使用 document.execCommand() 复制内容。
4. 最后，将临时textarea元素从文档中移除。

以下是一个实现文本复制的例子：

function copyTextToClipboard(text) {
    const tempTextArea = document.createElement('textarea');
    tempTextArea.value = text;
    document.body.appendChild(tempTextArea);
    tempTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(tempTextArea);
}

二、使用 Clipboard API

Clipboard API 是最新的实现复制操作的方式。它提供一种更方便的方式来复制和粘贴文本、图片等资源。

navigator.clipboard.writeText(text);

使用此方法的步骤和 document.execCommand() 类似，只是不需要创建临时的 textarea 元素。

以下是一个实现文本复制的例子：

function copyTextToClipboard(text) {
    navigator.clipboard.writeText(text)
        .then(() => {
            console.log('Copied to clipboard');
        })
        .catch(err => {
            console.error('Failed to copy: ', err);
        });
}

总结

以上就是 Javascript 实现复制操作的几种方式。其中 document.execCommand() 是兼容性最好的方式，但 Clipboard API 在兼容性上也得到了很好的支持。还需要注意的是，在使用 Clipboard API 时，必须满足网站是安全的（即使用 HTTPS 协议）。