剪切和复制命令

Matt Gaunt
X 首页

IE10 及更高版本增加了对“剪切”的支持和“copy”通过 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() 以编程方式设置“selection”锚点，也就是我们 想要复制到用户的剪贴板调用 document.execCommand() 后， 可以通过调用 window.getSelection().removeAllRanges()。 如果您想确认一切都按预期运行，请查看 document.execCommand(); 的响应则会返回 false， “受支持”或“已启用”我们将 execCommand() 封装在 try 中， 和“copy”都可能会抛出错误 在几个场景中。

“剪切”命令可用于要删除 并使其可通过剪贴板访问。

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

queryCommandSupported和queryCommandEnabled

在调用 document.execCommand() 之前，您应确保此 API 使用 document.queryCommandSupported() 方法。在上面的示例中，我们可以根据 支持：

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

两者的区别在于 document.queryCommandSupported() 和 document.queryCommandEnabled() 浏览器可以支持剪切和复制，但如果当前未选择任何文字，则无法启用此功能。这一功能适用于 以编程方式设置文本选择，并希望确保命令 会按预期运行，否则就会向用户显示消息。

浏览器支持

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

Safari 不支持这些命令。

已知错误