Recortar e copiar comandos

O IE10 e versões mais recentes adicionaram suporte para os comandos "cortar" e "copiar" pelo método Document.execCommand(). A partir da versão 43 do Chrome, esses comandos também são aceitos.

Qualquer texto selecionado no navegador quando um desses comandos é executado é cortado ou copiado para a área de transferência do usuário. Isso permite que você ofereça ao usuário uma maneira simples de selecionar uma parte do texto e copiá-lo para a área de transferência.

Isso se torna extremamente útil quando combinado com a API Selection para selecionar texto de forma programática e determinar o que é copiado para a área de transferência, que vamos analisar em mais detalhes mais adiante neste artigo.

Exemplo simples

Por exemplo, vamos adicionar um botão que copia um endereço de e-mail para a área de transferência do usuário.

Adicionamos o endereço de e-mail no HTML com um botão para iniciar a cópia quando ele for clicado:

<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>

Em seguida, no JavaScript, queremos adicionar um manipulador de eventos de clique ao botão, selecionando o texto do endereço de e-mail da âncora js-emaillink, executando um comando de cópia para que o endereço de e-mail fique na área de transferência do usuário e, em seguida, desmarcando o endereço de e-mail para que o usuário não veja a seleção.

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

O que estamos fazendo aqui é usar um método da API Selection, window.getSelection() para definir programaticamente a "seleção" de texto para o âncora, que é o texto que queremos copiar para a área de transferência do usuário. Depois de chamar document.execCommand(), podemos remover a seleção chamando window.getSelection().removeAllRanges(). Se você quiser confirmar se tudo funcionou como esperado, examine a resposta de document.execCommand(); ela retorna falso se o comando não tiver suporte ou não estiver ativado. Nós envolvemos execCommand() em uma tentativa e captura, já que os comandos "cortar" e "copiar" podem gerar um erro em alguns cenários.

O comando "cortar" pode ser usado para campos de texto em que você quer remover o conteúdo de texto e torná-lo acessível pela área de transferência.

Usando um textarea e um botão no HTML:

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

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

Podemos fazer o seguinte para remover o conteúdo:

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 e queryCommandEnabled

Antes de chamar document.execCommand(), confira se essa API tem suporte usando o método document.queryCommandSupported(). No exemplo acima, podemos definir o estado desativado do botão com base no suporte da seguinte maneira:

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

A diferença entre document.queryCommandSupported() e document.queryCommandEnabled() é que o corte e a cópia podem ser compatíveis com um navegador, mas, se nenhum texto estiver selecionado, eles não serão ativados. Isso é útil em cenários em que você não configura a seleção de texto de forma programática e quer garantir que o comando funcione como esperado. Caso contrário, apresente uma mensagem ao usuário.

Compatibilidade com navegadores

O IE 10 ou mais recente, o Chrome 43 ou mais recente, o Firefox 41 ou mais recente e o Opera 29 ou mais recente são compatíveis com esses comandos.

O Safari não oferece suporte a esses comandos.

Bugs conhecidos

• Chamar queryCommandSupported() dos DevTools sempre vai retornar false.
• No momento, o corte só funciona quando você seleciona texto de forma programática.