剪切和复制命令

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 不支持这些命令。

已知 bug