Recortar e copiar comandos

O IE10 e versões mais recentes incluíam suporte para o "corte" e "copiar" por meio do comando Document.execCommand() . A partir do Chrome versão 43, esses comandos também serão compatíveis com o Chrome.

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

Isso é muito útil quando você combina com a API Selection para programaticamente o texto para determinar o que é copiado para a área de transferência, que veremos em mais detalhes posteriormente neste artigo.

Exemplo simples

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

Adicionamos o endereço de e-mail ao HTML com um botão para iniciar a cópia quando alguém clica nela:

<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 nosso JavaScript, queremos adicionar um manipulador de eventos de clique em nosso botão em que selecionamos o texto do endereço de e-mail na âncora js-emaillink, executamos uma cópia para que o endereço de e-mail fique na área de transferência do usuário e desmarque o endereço de e-mail para que o usuário não veja a seleção ocorrer.

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

Neste caso, vamos usar um método da API Selection, window.getSelection() para definir o valor de "selection" de modo programático de texto para a âncora, que é o texto que quer copiar para a área de transferência do usuário. Depois de chamar document.execCommand(), pode remover a seleção chamando window.getSelection().removeAllRanges(). Se você quiser confirmar se tudo funcionou como esperado, examine o resposta de document.execCommand() ele retornará "false" se o comando não for compatíveis ou ativados. Encapsulamos execCommand() em uma tentativa e captura, desde que o "corte" e "copiar" comandos podem gerar um erro em alguns cenários.

O "corte" pode ser usado nos campos de texto em que você quer remover o texto e torná-lo acessível pela área de transferência.

Usando uma área de texto e um botão no nosso 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 recortar 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(), verifique se essa API está são suportados usando o document.queryCommandSupported() . Em nosso exemplo acima, poderíamos definir o estado do botão desativado com base no suporte da seguinte forma:

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

A diferença entre document.queryCommandSupported() e document.queryCommandEnabled() é que o recorte e cópia podem ser suportados pelo navegador, mas se nenhum texto estiver selecionado no momento, eles não serão ativados. Isso é útil quando você não definindo a seleção do texto de maneira programática e quer garantir que o comando fará o esperado. Caso contrário, apresente uma mensagem ao usuário.

Compatibilidade com navegadores

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

O Safari não é compatível com esses comandos.

Bugs conhecidos