Como copio para a área de transferência em JavaScript?

3322

Qual é a melhor maneira de copiar texto para a área de transferência? (multi-navegador)

Eu tentei:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

mas no Internet Explorer, ocorre um erro de sintaxe. No Firefox, diz unsafeWindow is not defined.

Um bom truque sem flash: como o Trello acessa a área de transferência do usuário?

Santiago Corredoira
fonte
Apenas curioso, o que você deseja copiar para a área de transferência que o usuário não pode fazer sozinho?
Scunliffe
233
Nada especial. Eles podem fazer isso sozinhos, mas quero oferecer também a possibilidade de clicar em um botão sem se preocupar em selecionar a parte correta do texto.
Santiago Corredoira
4
Esta longa postagem no blog contém várias maneiras de fazer isso: Acessando a área de transferência do sistema com JavaScript - um Santo Graal?
precisa saber é o seguinte
É dar navegador exceção indefinido no IE, bem como no FF
Jagadeesh
1
Se pudermos colocar texto na área de transferência do usuário, podemos arruinar a área de transferência.
Frank fang

Respostas:

2249

Visão geral

Existem três APIs principais do navegador para copiar para a área de transferência:

  1. API de área de transferência assíncrona [navigator.clipboard.writeText]
    • Parte com foco em texto disponível no Chrome 66 (março de 2018)
    • O acesso é assíncrono e usa promessas de JavaScript , pode ser gravado para que os prompts do usuário de segurança (se exibidos) não interrompam o JavaScript na página.
    • O texto pode ser copiado para a área de transferência diretamente de uma variável.
    • Suportado apenas em páginas veiculadas em HTTPS.
    • No Chrome 66, as páginas nas guias ativas podem gravar na área de transferência sem um prompt de permissão.
  2. document.execCommand('copy')
    • A maioria dos navegadores é compatível com isso a partir de abril de 2015 (consulte Suporte ao navegador abaixo).
    • O acesso é síncrono, ou seja, interrompe o JavaScript na página até a conclusão, incluindo a exibição e a interação do usuário com qualquer solicitação de segurança.
    • O texto é lido do DOM e colocado na área de transferência.
    • Durante o teste ~ abril de 2015, apenas o Internet Explorer foi observado como exibindo prompts de permissões enquanto gravava na área de transferência.
  3. Substituindo o evento de cópia
    • Consulte a documentação da API da área de transferência em Substituindo o evento de cópia .
    • Permite modificar o que aparece na área de transferência a partir de qualquer evento de cópia, podendo incluir outros formatos de dados que não sejam texto sem formatação.
    • Não abordado aqui, pois não responde diretamente à pergunta.

Notas gerais de desenvolvimento

Não espere que os comandos relacionados à área de transferência funcionem enquanto você estiver testando o código no console. Geralmente, é necessário que a página esteja ativa (API do Async Clipboard) ou requer interação do usuário (por exemplo, um clique do usuário) para permitir ( document.execCommand('copy')) acessar a área de transferência, veja abaixo para obter mais detalhes.

IMPORTANTE (observado aqui 2020/02/20)

Observe que, desde que esta postagem foi originalmente descontinuada por escrito, as permissões em IFRAMEs de origem cruzada e outros "sandboxing" de IFRAME impedem que as demos incorporadas "Execute o snippet de código" e o "codepen.io example" funcionem em alguns navegadores (incluindo Chrome e Microsoft Edge) )

Para desenvolver, crie sua própria página da web, sirva essa página pela conexão HTTPS para testar e desenvolver.

Aqui está uma página de teste / demonstração que demonstra o funcionamento do código: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Devido ao nível de suporte do navegador para a nova API do Async Clipboard, você provavelmente desejará recorrer ao document.execCommand('copy')método para obter uma boa cobertura do navegador.

Aqui está um exemplo simples (pode não funcionar incorporado neste site, leia a nota "importante" acima):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(o exemplo do codepen.io pode não funcionar, leia a observação "importante" acima). Observe que este snippet não está funcionando bem na visualização incorporada do Stack Overflow. Você pode experimentá-lo aqui: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

API de área de transferência assíncrona

Observe que existe a capacidade de "solicitar permissão" e testar o acesso à área de transferência por meio da API de permissões no Chrome 66.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copy')

O restante deste post aborda as nuances e os detalhes da document.execCommand('copy')API.

Suporte do navegador

O document.execCommand('copy')suporte ao JavaScript aumentou, veja os links abaixo para atualizações do navegador:

Exemplo Simples

(pode não funcionar incorporado neste site, leia a nota "importante" acima)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Exemplo complexo: Copiar para a área de transferência sem exibir a entrada

O exemplo simples acima funciona muito bem se houver um elemento textareaou inputvisível na tela.

Em alguns casos, você pode querer copiar texto para a área de transferência sem exibir um elemento input/ textarea. Este é um exemplo de uma maneira de contornar isso (basicamente insira o elemento, copie para a área de transferência, remova o elemento):

Testado com Google Chrome 44, Firefox 42.0a1 e Internet Explorer 11.0.8600.17814.

(pode não funcionar incorporado neste site, leia a nota "importante" acima)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Notas Adicionais

Funciona apenas se o usuário executar uma ação

Todas as document.execCommand('copy')chamadas devem ocorrer como resultado direto de uma ação do usuário, por exemplo, clique em manipulador de eventos. Esta é uma medida para evitar mexer com a área de transferência do usuário quando eles não a esperam.

Veja a postagem dos desenvolvedores do Google aqui para obter mais informações.

API da área de transferência

Observe que a especificação completa do rascunho da API da área de transferência pode ser encontrada aqui: https://w3c.github.io/clipboard-apis/

É suportado?

  • document.queryCommandSupported('copy')deve retornar truese o comando "é suportado pelo navegador".
  • e document.queryCommandEnabled('copy')retorne truese o document.execCommand('copy')for bem-sucedido se for chamado agora. Verificando para garantir que o comando foi chamado a partir de um encadeamento iniciado pelo usuário e outros requisitos sejam atendidos.

No entanto, como um exemplo de problemas de compatibilidade do navegador, o Google Chrome de ~ abril a ~ outubro de 2015 retornou apenas truede document.queryCommandSupported('copy')se o comando foi chamado a partir de um encadeamento iniciado pelo usuário.

Observe os detalhes de compatibilidade abaixo.

Detalhes de compatibilidade do navegador

Enquanto um simples chamada para document.execCommand('copy')envolto em um try/ catchbloco chamado como resultado de um clique do usuário irá obter o uso mais compatibilidade a seguinte tem algumas ressalvas:

Qualquer chamada para document.execCommand, document.queryCommandSupportedou document.queryCommandEnableddeve ser agrupada em um try/ catchbloco.

Diferentes implementações de navegador e versões de navegador lançam diferentes tipos de exceções quando chamadas em vez de retornar false.

Diferentes implementações de navegadores ainda estão em andamento e a API da área de transferência ainda está em rascunho. Lembre-se de fazer seus testes.

Dean Taylor
fonte
41
como copiar diretamente de um dado variável .ie var str = "word";:?
jscripter
10
@BubuDaba Crie um manequim oculto <textarea>com JS, anexe-o a document.body, defina seu valor para a variável e use-o no ritmo de copyTextarea, depois remova-o logo após a cópia do conteúdo.
SeinopSys
3
Existe alguma coisa para o Safari ou algum indicador que será implementado no Safari?
www139 07/01
3
A única versão que encontrei que funciona em todos os navegadores. Descobri que ao usar isso no Boostrap Modal, tive que acrescentar a área de texto ao modal. Eu daria um +1000 se pudesse pela sua solução !!! OBRIGADO!
287 Patrick
3
@AyaSalama, o ponto principal é que a ação "copiar" não pode ocorrer, a menos que apareça no navegador que o usuário está realizando a ação. O usuário não poderá executar a ação se o elemento estiver estilizado com "display: none", pois não conseguiria vê-lo nem interagir com ele.
Dean Taylor
1257

A cópia automática para a área de transferência pode ser perigosa; portanto, a maioria dos navegadores (exceto o IE) torna muito difícil. Pessoalmente, eu uso o seguinte truque simples:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

O usuário recebe a caixa de prompt, onde o texto a ser copiado já está selecionado. Agora basta pressionar Ctrl+ Ce Enter(para fechar a caixa) - e pronto!

Agora, a operação de cópia da área de transferência é SEGURA, porque o usuário faz isso manualmente (mas de maneira bastante direta). Obviamente, funciona em todos os navegadores.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

Jarek Milewski
fonte
91
Inteligente, mas isso suporta apenas uma linha.
Aram Kocharyan
61
É trivial alterar a função "prompt" para um modal personalizado. O truque é usar um campo de conteúdo editável e pré-selecionar o texto, e isso não interrompe a interface do navegador, impondo que o usuário use o ação em si. A ++
Jon z
110
Ainda não usar javascript para copiar para área de transferência ^ _ ^
ROZZA
23
Se o texto é mais de 2000 caracteres, será truncado, mas para amostras de texto menores ele funciona muito bem
RasTheDestroyer
445
Estranho que isso receba 457 votos positivos enquanto não responde à pergunta: copie para a área de transferência em Javascript !
stevenvh
300

A abordagem a seguir funciona no Chrome, Firefox, Internet Explorer e Edge e nas versões recentes do Safari (o suporte à cópia foi adicionado na versão 10, lançada em outubro de 2016).

  • Crie uma área de texto e defina seu conteúdo para o texto que você deseja copiar para a área de transferência.
  • Anexe a área de texto ao DOM.
  • Selecione o texto na área de texto.
  • Chame document.execCommand ("copy")
  • Remova a área de texto do domínio.

Nota: você não verá a área de texto, pois ela é adicionada e removida na mesma chamada síncrona do código Javascript.

Algumas coisas a observar se você estiver implementando isso sozinho:

  • Por motivos de segurança, isso só pode ser chamado a partir de um manipulador de eventos, como clique (assim como na abertura de janelas).
  • O Internet Explorer mostrará uma caixa de diálogo de permissão na primeira vez que a área de transferência for atualizada.
  • O Internet Explorer e o Edge rolarão quando a área de texto estiver focada.
  • execCommand () pode ser lançado em alguns casos.
  • Novas linhas e guias podem ser engolidas, a menos que você use uma área de texto. (A maioria dos artigos parece recomendar o uso de uma div)
  • A área de texto ficará visível enquanto a caixa de diálogo do Internet Explorer for exibida, você precisará ocultá-la ou usar a API clipboardData específica do Internet Explorer.
  • No Internet Explorer, os administradores de sistema podem desativar a API da área de transferência.

A função abaixo deve lidar com todos os problemas a seguir da maneira mais limpa possível. Deixe um comentário se encontrar algum problema ou tiver sugestões para aprimorá-lo.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Greg Lowe
fonte
9
Boa resposta: suporte a vários navegadores, tratamento de erros + limpeza. A partir do novo suporte atual para queryCommandSupported, a cópia para a área de transferência agora é viável em Javascript e esta deve ser a resposta aceita, em vez da desajeitada 'window.prompt ("Copiar para a área de transferência: Ctrl + C, Enter", texto)' solução alternativa. window.clipboardData é suportado no IE9, portanto, você deve adicionar o IE9 na lista de suporte do navegador e acho que talvez o IE8 e anterior também, mas precise verificar.
user627283
Sim. IE 8/9 deve estar ok. Nosso aplicativo não os suporta. Então eu não testei. O IE interrompe o suporte em janeiro, então não estou muito preocupado. Esperamos que o suporte ao Safari chegue em breve. Tenho certeza de que está no radar deles.
Greg Lowe
4
@SantiagoCorredoira: Em 2016, isso merece ser a resposta aceita. Considere reatribuir o BGT (grande escala verde).
Lawrence Dol
3
@Noitidart I Testado e ele funciona perfeitamente para o Firefox 54, cromo navegador 60 e borda, mesmo quando o foco não está no documento HTML, o erro que você está tendo é provavelmente específico para a versão FF 55
Tosin John
2
@Noitidart Ainda funciona perfeitamente aqui, focar nas ferramentas de desenvolvimento não o impediu. E, a propósito, o que um usuário normal de aplicativo da web estará fazendo em ferramentas de desenvolvedor
Tosin John
97

Aqui está a minha opinião sobre esse ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@ korayem: Observe que usar o inputcampo html não respeitará quebras de linha \ne achatará qualquer texto em uma única linha.

Conforme mencionado por @nikksan nos comentários, usar textareacorrigirá o problema da seguinte maneira:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}
Nikksan
fonte
@nikksan como copiar a string \n?
sof-03
2
@ sof-03 utilização textarea em vez de entrada e adicionar \r\numa quebra de linha
nikksan
1
Não funciona no Microsoft Edge 42.17134.1.0 no Win10x64
Honsa Stunna
3
Eu copiei sua resposta. Funciona em cromo e é tudo o que preciso.
user875234
Esta é a solução mais simples que funciona com o Firefox v68.0.2 (64 bits).
Arya
88

Se você deseja uma solução realmente simples (leva menos de 5 minutos para integrar) e fica bem logo de cara , o Clippy é uma boa alternativa para algumas das soluções mais complexas.

Foi escrito por um co-fundador do GitHub. Exemplo de código de incorporação do Flash abaixo:

<object
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

Lembre-se de substituir #{text}pelo texto que você precisa copiar e #{bgcolor}por uma cor.

Brent Matzelle
fonte
12
Para qualquer pessoa interessada, verifique o Clippy sendo usado no GitHub ao copiar o URL do repositório.
Radek 23/05
66
Para sua informação, o uso do Clippy no GitHub foi substituído pelo ZeroClipboard.
James M. Greene
219
O OP queria uma solução em JavaScript. Não pisca.
MT.
21
@MT, por "javascript", algumas pessoas significam "no cliente do navegador", portanto, embora apenas o JS possa ser um requisito, muitas das pessoas que têm essa resposta estão realmente procurando por JS ou outro com amplo suporte- cliente-tecnologia. O Flash não atinge todas as plataformas, mas para um recurso de polimento como o suporte à área de transferência, vale a pena adicionar se melhorar o UX em uma caixa de diálogo pop-up (o que certamente acontece).
Dave Dopson 24/03
13
Agora, contar com o Flash significa fazer com que as coisas não funcionem para uma porcentagem de visitantes do site, o que é inaceitável para quase todo mundo que faz desenvolvimento na Web.
Jinglesthula # 4/16
86

Ler e modificar a área de transferência de uma página da Web levanta preocupações de segurança e privacidade. No entanto, no Internet Explorer, é possível fazer isso. Encontrei este exemplo de trecho :

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

bandi
fonte
7
Usar o flash para uma operação simples de cópia parece um exagero, feliz por haver uma maneira JS limpa de fazer isso. E já que estamos em um ambiente corporativo. IE está bem. Graças à Bandi!
Eddie
5
plz explicar o execCommand(\\’copy\\’);que, se não copiar para a área de transferência para o IE? @mrBorna
RozzA
20
Não use, if(!document.all)mas if(!r.execCommand)ninguém mais o implementa! Document.all é absolutamente irrelevante para isso.
M93a
1
Cara, é isso que eu amo em código simples e limpo, ele funciona quase sempre com pouca manutenção. Isso fez por mim, funciona lindamente.
Samuel Ramzan
1
não funciona no chrome, no firefox ou no MS Edge mais recente :(
Jonathan Marzullo
69

Recentemente, escrevi um post técnico sobre esse problema (trabalho no Lucidchart e recentemente fizemos uma revisão na nossa área de transferência).

Copiar texto sem formatação para a área de transferência é relativamente simples, supondo que você queira fazê-lo durante um evento de cópia do sistema (o usuário pressiona CtrlCou usa o menu do navegador).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Colocar o texto na área de transferência não durante um evento de cópia do sistema é muito mais difícil. Parece que algumas dessas outras respostas referenciam maneiras de fazê-lo via Flash, que é a única maneira entre navegadores de fazê-lo (pelo que entendi).

Fora isso, existem algumas opções em cada navegador.

Este é o mais simples no IE, onde você pode acessar o objeto clipboardData a qualquer momento a partir do JavaScript via:

window.clipboardData

(Quando você tenta fazer isso fora de um evento de recortar, copiar ou colar do sistema, no entanto, o IE solicitará ao usuário que conceda permissão à área de transferência do aplicativo Web.)

No Chrome, você pode criar uma extensão do Chrome que concederá permissões de área de transferência (é o que fazemos no Lucidchart). Em seguida, para usuários com sua extensão instalada, você só precisará disparar o evento do sistema:

document.execCommand('copy');

Parece que o Firefox tem algumas opções que permitem aos usuários conceder permissões para determinados sites acessarem a área de transferência, mas eu nunca tentei nenhum deles pessoalmente.

Richard Shurtz
fonte
2
Não mencionada na postagem do blog (espero atualizá-la no futuro próximo), é a capacidade de acionar recortar e copiar usando o execCommand. Isso é suportado no IE10 +, Chrome 43+ e Opera29 +. Leia aqui. updates.html5rocks.com/2015/04/cut-and-copy-commands
Richard Shurtz
Um problema é que ele sequestra outros eventos de cópia normais.
Brock Adams
NB! Este farejador de navegador é RUIM. Não cheiram. Você está dificultando a atualização do IE.
odinho - Velmont
51

O clipboard.js é um pequeno utilitário que não é o Flash que permite copiar dados de texto ou HTML para a área de transferência. É muito fácil de usar, basta incluir o .js e usar algo como isto:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js também está no GitHub .

Nota: isso foi preterido agora. Migrar para aqui .

um codificador
fonte
Essa biblioteca é usada pelo angular.io para seu Tour of Hero e fallback no modo normal para o navegador que não suporta o execCommand, exibindo um texto pré-selecionado que o usuário precisa apenas copiar.
John-Philip
1
Looks tanto clipboard.js foi substituído, ou bifurcada, mas parece que para viver e é mantido ativamente na npmjs.com/package/clipboard
João
35

ZeroClipboard é a melhor solução entre navegadores que eu encontrei:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Se você precisar de suporte não flash para iOS, basta adicionar um fallback:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

Justin
fonte
25
navegador cruzado com o Flash? não funciona no iOS e Android 4.4
Raptor
1
Veja a resposta atualizada. Isso permite menos etapas para usuários de flash e um retorno para todos os outros.
Justin Justin
8
tem um bilhão de linhas de código. é absolutamente ridículo. melhor não fazer isso do que incluir esse monstro em um projeto
vsync 27/10/2014
2
Existe uma versão simples gist.github.com/JamesMGreene/8698897 com 20K que não possui todos os sinos e assobios da versão 74k. Nem é muito grande. Meu palpite é que a maioria dos usuários concorda com os milissegundos extras que um arquivo de 74k ou 20k sendo baixado levará, então copiar / colar é um clique em vez de dois.
27714 Justin
@ Justin Eu simplesmente não consigo fazê-lo funcionar localmente, mesmo que eu copie e cole os exemplos (eu faço alterações mínimas, por exemplo, o valor das srctags de script). Eu sinto que a documentação deles é bonita, mas ineficiente.
Gui Imamura
29

Em 2018, veja como você pode fazer isso:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

É usado no meu código Angular 6+ da seguinte forma:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Se eu passar uma string, ela a copia. Se nada, ele copia o URL da página.

Também pode ser feita mais ginástica para o material da área de transferência. Veja mais informações aqui:

Desbloqueando o acesso à área de transferência

KhoPhi
fonte
você vinculou a localhost
Joe Warner
2
Por favor, esteja ciente de que isso não funciona no Safari (versão 11.1.2)
arjun27
1
@ arjun27 Bem, espero que um dia a Apple atinja. Embora este caniuse.com/#feat=clipboard mostre a versão acima mencionada como parcialmente suportada.
KhoPhi
2
Estou recebendo para ambas as funções readText, writeText uma promessa no estado rejeitado
ramin
3
De acordo com o link fornecido, "navigator.clipboard é suportado apenas para páginas veiculadas em HTTPS"
TimH - Codidact
26

De um dos projetos em que estou trabalhando, um plug-in de cópia para área de transferência do jQuery que utiliza a biblioteca Zero Clipboard .

É mais fácil de usar do que o plugin nativo da Zero Clipboard se você é um usuário pesado do jQuery.

SteamDev
fonte
6
92kb não é tão grande, realmente, trabalha rápido e você pode usar text()em vez de innerHTML()se você gosta ..
ROZZA
17
@ John: innerHTMLé suportado em vários navegadores há muito tempo. Só porque a Microsoft originalmente teve a ideia de não torná-la não confiável ou proprietária. Agora também está finalmente sendo adicionado às especificações oficiais (depois que todos os principais fornecedores de navegadores já adicionaram suporte a ele ... suspiro ).
James M. Greene
19
@ John Você reclamar jQuery não ser JavaScripty suficiente em uma resposta que usa o Flash;)
Max Nanasy
4
innerHTML é melhor que alternativas na maioria dos casos. Saia do seu cavalo alto! É mais rápido, mais eficiente e não requer uma nova renderização da página.
Orbiting Eden
4
@RozzA 92KBé realmente grande. Até o LTE amadurecer, o GPRS é o padrão de dados móveis da WW e começa em 1 KB/s. Faça as contas você mesmo.
Tino
23

Como o Chrome 42+ e o Firefox 41+ agora suportam o comando document.execCommand ('copy') . Então, criei algumas funções para a capacidade de copiar para área de transferência em vários navegadores usando uma combinação da resposta antiga de Tim Down e da resposta do desenvolvedor do Google :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));
<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>

Jeff Baker
fonte
Obrigado por resumir isso! Você tem um pequeno erro no seu código: você definiu a variável "range" duas vezes (var range = document.createRange ()).
Christian Engel
1
Você está correto @ChristianEngel. Eu removi o segundo. Não sei como chegou lá.
22415 Jeff Jeff Baker19:
23

Eu uso isso com muito sucesso ( sem jQuery ou qualquer outro quadro).

function copyToClp(txt){
    txt = document.createTextNode(txt);
    var m = document;
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Atenção

As guias são convertidas em espaços (pelo menos no Chrome).

Sombrio
fonte
Espaços estão faltando nesta abordagem
Bikram
1
Cromada. abas são convertidos para um espaço
Bikram
22

Encontrei a seguinte solução:

No manipulador de teclas, cria a tag "pre". Definimos o conteúdo para copiar para essa tag, depois fazemos uma seleção nessa tag e retornamos true no manipulador. Isso chama o manipulador padrão do chrome e copia o texto selecionado.

E, se necessário, você pode definir o tempo limite da função para restaurar a seleção anterior. Minha implementação no Mootools:

   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }

Uso:

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;

Ao colar, ele cria uma área de texto e funciona da mesma maneira.

PS pode ser que esta solução possa ser usada para criar uma solução totalmente para vários navegadores sem flash. Seus trabalhos em FF e Chrome.

Enyby
fonte
2
Alguém já tentou isso? Soa como uma coisa bacana, caso funcione de verdade em vários navegadores!
Michael
1
jsfiddle.net/H2FHC Demo: fiddle.jshell.net/H2FHC/show Abra-o e pressione Ctrl + V ou Ctrl + C. No FF 19.0 garfos perfeitamente. No Chrome, 25.0.1364.97 m também. Opera 12.14 - OK. Safari 5.1.7 para Windows - OK. IE - FALHA.
Enyby
Para o IE, execute o foco no elemento dentro da página. Consulte fiddle.jshell.net/H2FHC/3/show e fiddle.jshell.net/H2FHC/3 Trabalhado no IE 9/10. O IE 6/7 precisa que o processo crie a seleção de outra maneira porque document.createRange não é suportado.
Enyby
21

Os outros métodos copiarão texto sem formatação para a área de transferência. Para copiar HTML (ou seja, você pode colar os resultados em um editor WSIWYG), você pode fazer o seguinte no IE ONLY . Isso é fundamentalmente diferente dos outros métodos, pois o navegador realmente seleciona visivelmente o conteúdo.

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   
Chase Seibert
fonte
veja a solução HTML mais completa aqui stackoverflow.com/questions/34191780/…
kofifus
21

Eu montei o que eu acho que é o melhor.

  • Usa cssText para evitar exceções no Internet Explorer, em vez de estilizar diretamente.
  • Restaura a seleção se houver uma
  • Define somente leitura para que o teclado não apareça em dispositivos móveis
  • Possui uma solução alternativa para iOS para que ele realmente funcione, pois normalmente bloqueia o execCommand.

Aqui está:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // /programming/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Uso: copyToClipboard('some text')

Dominic
fonte
13

No Flash 10, você só pode copiar para a área de transferência se a ação se originar da interação do usuário com um objeto Flash. ( Leia a seção relacionada do anúncio do Adobe Flash 10 )

A solução é exagerar um objeto flash acima do botão Copiar ou qualquer elemento que inicia a cópia. Atualmente, a Zero Clipboard é a melhor biblioteca com esta implementação. Desenvolvedores experientes em Flash podem apenas querer criar sua própria biblioteca.

matthuhiggins
fonte
12

  <!DOCTYPE html>

  <style>
    #t {
      width: 1px
      height: 1px
      border: none
    }
    #t:focus {
      outline: none
    }
  </style>

  <script>
    function copy(text) {
      var t = document.getElementById('t')
      t.innerHTML = text
      t.select()
      try {
        var successful = document.execCommand('copy')
        var msg = successful ? 'successfully' : 'unsuccessfully'
        console.log('text coppied ' + msg)
      } catch (err) {
        console.log('Unable to copy text')
      }
      t.innerHTML = ''
    }
  </script>

  <textarea id=t></textarea>

  <button onclick="copy('hello world')">
    Click me
  </button>

Samuel Tees
fonte
A melhor resposta: D, você pode melhorá-lo com algo assim: #t {position: absolute; esquerda: 0; índice z: -900; largura: 0px; altura: 0px; borda: nenhuma; } Então, ele ficará totalmente oculto! Mas realmente obrigado mano!
Federico Navarrete
#t {redimensionar: nenhum;} #
SmartManoj 24/06
Uma explicação estaria em ordem.
Peter Mortensen
12

Encontrei a seguinte solução:

Eu tenho o texto em uma entrada oculta. Como setSelectionRangenão funciona em entradas ocultas, alterei temporariamente o tipo para texto, copiei o texto e o ocultei novamente. Se você deseja copiar o texto de um elemento, pode passá-lo para a função e salvar seu conteúdo na variável de destino.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}
Vassilis Pallas
fonte
11

Copie o texto da entrada HTML para a área de transferência:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }
 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Nota: O document.execCommand()método não é suportado no Internet Explorer 9 e versões anteriores.

Fonte : W3Schools - Copiar texto para a área de transferência

Alexandru Sirbu
fonte
11

Já existem muitas respostas, mas gostaria de adicionar uma (jQuery). Funciona muito bem em qualquer navegador, também móvel (por exemplo, avisos sobre segurança, mas quando você o aceita, funciona bem).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

No seu código:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}
Codebeat
fonte
9

Esta é uma combinação um pouco entre as outras respostas.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Ele usa jQuery, mas não precisa, é claro. Você pode mudar isso se quiser. Eu só tinha jQuery à minha disposição. Você também pode adicionar um pouco de CSS para garantir que a entrada não seja exibida. Por exemplo, algo como:

.textToCopyInput{opacity: 0; position: absolute;}

Ou é claro, você também pode fazer um estilo embutido

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )
Bart Burg
fonte
Como copiar diretamente de um dado variável .ie: var str = "word"; ?
A mensagem variável não é utilizada
Voyager
Melhor usar '<textarea class = "textToCopyInput" /> </textarea>' caso textToCopycontenha\n
Voyager
8

Em navegadores que não sejam o IE, você precisa usar um pequeno objeto flash para manipular a área de transferência, por exemplo,

Quog
fonte
Isso está desatualizado agora ... confira a sugestão de GvS
Mottie
6
A sugestão do GvS usa um filme em flash? Não é a mesma ideia?
TheEmirOfGroofunkistan 8/08/09
8

Eu tive o mesmo problema ao criar uma edição de grade personalizada (algo como Excel) e compatibilidade com o Excel. Eu tive que apoiar a seleção de várias células, copiar e colar.

Solução: crie uma área de texto na qual você inserirá dados para o usuário copiar (para mim quando o usuário estiver selecionando células), concentre-se nela (por exemplo, quando o usuário pressionar Ctrl) e selecione o texto inteiro.

Então, quando o usuário pressiona Ctrl+C ele / ela recebe as células copiadas, ele / ela seleciona. Após o teste, redimensione a área de texto para um pixel (não testei se ele funcionaria no visor: nenhum). Funciona bem em todos os navegadores e é transparente para o usuário.

Colar - você pode fazer o mesmo assim (difere no seu destino) - manter o foco na área de texto e capturar eventos de colagem usando onpaste (no meu projeto eu uso áreas de texto nas células para editar).

Não consigo colar um exemplo (projeto comercial), mas você entendeu.

xiniu
fonte
7

Eu usei o clipboard.js.

Podemos obtê-lo em npm:

npm install clipboard --save

E também no Bower

bower install clipboard --save

O uso e os exemplos estão em https://zenorocha.github.io/clipboard.js/ .

CodecPM
fonte
Eu estava com medo de que não era compatível com conteúdo dinâmico, mas é ;-) Eu acho que é a solução melhor, agora, do que o antigo de 2008.
BENARD Patrick
6

Essa é uma expansão da resposta do @ Chase, com a vantagem de funcionar para os elementos IMAGE e TABLE, não apenas os DIVs no IE9.

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}
Oliver Bock
fonte
5

Parece que eu interpretei mal a pergunta, mas para referência, você pode extrair um intervalo do DOM (não para a área de transferência; compatível com todos os navegadores modernos) e combiná-lo com os eventos oncopy e onpaste e onbeforepaste para obter o comportamento da área de transferência. Aqui está o código para conseguir isso:

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}
mrBorna
fonte
1
na verdade eu corrigi o código. Ele funciona em todos os navegadores, mas na verdade não é copiado para a área de transferência. Apenas extrai (corta), clona (copia) o conteúdo através de variáveis. Parece que eu tinha esquecido o uso.
precisa saber é o seguinte
5

Foi mal. Isso funciona apenas no IE.

Aqui está outra maneira de copiar texto:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>
dvallejo
fonte
9
Isso não funciona no Chrome atual (V31) ou no FireFox (v25). O erro é que window.clipboardData é indefinido. No lado positivo, ele funciona no IE9. Portanto, desde que você não se preocupe com bons navegadores e queira bloquear seu site com o uso de maus, é esse o caminho para você!
14133 Anthony
2
Eu não entendo por que tantas respostas tolas. w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
Martian2049
5

Essa foi a única coisa em que comecei a trabalhar, depois de procurar várias maneiras pela Internet. Este é um tópico confuso. Existem muitas soluções publicadas em todo o mundo e a maioria delas não funciona. Isso funcionou para mim:

NOTA: Este código só funcionará quando executado como código síncrono direto para algo como um método 'onClick'. Se você chamar uma resposta assíncrona para o Ajax ou de qualquer outra maneira assíncrona, ele não funcionará.

copyToClipboard(text) {
    var copyText = document.createElement("input");
    copyText.type = "text";
    document.body.appendChild(copyText);
    copyText.style = "display: inline; width: 1px;";
    copyText.value = text;
    copyText.focus();
    document.execCommand("SelectAll");
    document.execCommand("Copy");
    copyText.remove();
}

Sei que esse código mostrará um componente de 1 pixel de largura visivelmente na tela por um milissegundo, mas decidi não me preocupar com isso, que é algo que outras pessoas podem resolver se for um problema real.

Peter Mortensen
fonte
5

Para copiar um texto selecionado ('Texto para copiar') para a área de transferência, crie um Bookmarklet (marcador de navegador que executa JavaScript) e execute-o (clique nele). Ele criará uma área de texto temporária.

Código do GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');
Mau
fonte