剪切和复制命令

Matt Gaunt
X 首页

IE10 及更高版本通过 Document.execCommand() 方法添加了对“剪切”和“复制”命令的支持。从 Chrome 43 版开始，Chrome 也支持这些命令。

执行上述任一命令时，浏览器中所选的任何文本都会被剪切或复制到用户的剪贴板。这样，您就可以为用户提供一种简单的方法，让他们能够选择部分文本并将其复制到剪贴板。

将其与 Selection API 结合使用，以程序化方式选择文本以确定要复制到剪贴板的内容，这非常有用。我们将在本文稍后部分对此进行详细介绍。

简单示例

为方便起见，我们添加一个按钮，用于将电子邮件地址复制到用户的剪贴板。

我们在 HTML 中添加电子邮件地址，并带有一个在用户点击它时启动复制的按钮：

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

然后，在 JavaScript 中，我们需要将点击事件处理脚本添加到按钮中，以便从 js-emaillink 锚点中选择电子邮件地址文本，执行复制命令，将电子邮件地址放入用户的剪贴板中，然后取消选择电子邮件地址，这样用户就不会看到选择操作。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

我们在这里要做的是使用 Selection API 的方法 window.getSelection() 以编程方式将文本的“选择”设置为锚点，即我们要复制到用户剪贴板的文本。调用 document.execCommand() 后，我们可以通过调用 window.getSelection().removeAllRanges() 移除所选内容。如果您想确认一切是否按预期运行，可以检查 document.execCommand() 的响应；如果命令不受支持或未启用，则会返回 false。由于“剪切”和“复制”命令在某些情况下可能会抛出错误，因此我们将 execCommand() 封装在 try 和 catch 中。

“剪切”命令可用于您要移除文本内容并使其可通过剪贴板访问的文本字段。

在 HTML 中使用 textarea 和按钮：

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

我们可以通过以下方式剪辑内容：

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported和queryCommandEnabled

在调用 document.execCommand() 之前，您应使用 document.queryCommandSupported() 方法确保此 API 受支持。在上面的示例中，我们可以根据支持情况设置按钮的停用状态，如下所示：

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

document.queryCommandSupported() 和 document.queryCommandEnabled() 之间的区别在于，浏览器可能支持剪切和复制，但如果当前未选择任何文本，则这些操作将处于停用状态。这对于以下情况非常有用：您并非以编程方式设置文本选择，而是希望确保命令按预期执行，否则向用户显示一条消息。

浏览器支持

IE 10+、Chrome 43+、Firefox 41+ 和 Opera 29+ 支持这些命令。

Safari 不支持这些命令。

已知错误