剪切和复制命令

Matt Gaunt

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 APIwindow.getSelection() 方法,以编程方式将“选择”的文本设置为锚点,即我们想要复制到用户剪贴板中的文本。调用 document.execCommand() 后,我们可以通过调用 window.getSelection().removeAllRanges() 移除所选内容。如果您想确认一切都按预期运行,可以查看 document.execCommand); 的响应;如果该命令不受支持或未启用,则返回 false。我们将 execCommand() 封装在 try 和 catch 中,因为在一些情况下,“cut”和“copy”命令可能会抛出错误

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

在 HTML 中使用文本区域和按钮:

<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');
    }
});

queryCommandSupportedqueryCommandEnabled

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

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

document.queryCommandSupported()document.queryCommandEnabled() 之间的区别在于,浏览器可以支持剪切和复制,但如果当前未选择任何文本,则不会启用这两种文本。如果您未以编程方式设置文本选择,并且希望确保命令按预期执行,否则向用户显示消息,这会非常有用。

浏览器支持

IE 10 及更高版本、Chrome 43 及更高版本、Firefox 41 及更高版本和 Opera 29 及更高版本均支持这些命令。

Safari 不支持这些命令。

已知错误