Como copiar o texto dentro de uma div para a área de transferência? Eu tenho uma div e preciso adicionar um link que adicione o texto à área de transferência. Existe uma solução para isso?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

Depois de clicar em copiar texto, pressionar Ctrl+ V, ele deve ser colado.

Editar a partir de 2016

A partir de 2016, agora você pode copiar texto para a área de transferência na maioria dos navegadores, porque a maioria dos navegadores tem a capacidade de copiar programaticamente uma seleção de texto para a área de transferência usando document.execCommand("copy")isso funciona como uma seleção.

Como em outras ações de um navegador (como abrir uma nova janela), a cópia na área de transferência só pode ser feita por meio de uma ação específica do usuário (como um clique do mouse). Por exemplo, isso não pode ser feito através de um temporizador.

Aqui está um exemplo de código:

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Aqui está uma demonstração um pouco mais avançada: https://jsfiddle.net/jfriend00/v9g1x0o6/

Além disso, você também pode obter uma biblioteca pré-criada que faz isso com o clipboard.js .

Parte antiga e histórica da resposta

A cópia direta na área de transferência via JavaScript não é permitida por nenhum navegador moderno por razões de segurança. A solução mais comum é usar um recurso Flash para copiar para a área de transferência que só pode ser acionada por um clique direto do usuário.

Como já mencionado, o ZeroClipboard é um conjunto popular de códigos para gerenciar o objeto Flash para fazer a cópia. Eu já usei. Se o Flash estiver instalado no dispositivo de navegação (que exclui o celular ou o tablet), ele funciona.

A próxima solução mais comum é colocar o texto vinculado à área de transferência em um campo de entrada, mover o foco para esse campo e aconselhar o usuário a pressionar Ctrl+ Cpara copiar o texto.

Outras discussões sobre o problema e possíveis soluções alternativas podem ser encontradas nessas postagens anteriores do Stack Overflow:

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

• Como copiar texto para a área de transferência do cliente usando o jQuery?

• Como você pode copiar para a área de transferência sem o Flash?

Essas perguntas que pedem uma alternativa moderna ao uso do Flash receberam muitas perguntas positivas e nenhuma resposta com uma solução (provavelmente porque não existe):

• Alternativa HTML5 ao ZeroClipboard baseado em flash para cópia segura de dados para a área de transferência?

• Copiar para a área de transferência sem Flash

O Internet Explorer e o Firefox costumavam ter APIs não padrão para acessar a área de transferência, mas suas versões mais modernas preteriram esses métodos (provavelmente por razões de segurança).

Há um esforço incipiente de padrões para tentar encontrar uma maneira "segura" de resolver os problemas mais comuns da área de transferência (provavelmente exigindo uma ação específica do usuário, como a solução Flash exige), e parece que ela pode ser parcialmente implementada nos últimos anos. versões do Firefox e Chrome, mas ainda não o confirmei.

Atualização 2020 : Esta solução usa execCommand. Enquanto esse recurso estava bom no momento de escrever esta resposta, agora é considerado obsoleto . Ele ainda funcionará em muitos navegadores, mas seu uso é desencorajado, pois o suporte pode ser descartado.

Existe outra maneira não-Flash (além da API da área de transferência mencionada na resposta de jfriend00 ). Você precisa selecionar o texto e, em seguida, executar o comandocopy para copiar para a área de transferência, independentemente do texto selecionado atualmente na página.

Por exemplo, esta função copiará o conteúdo do elemento passado para a área de transferência (atualizada com a sugestão dos comentários do PointZeroTwo ):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

É assim que funciona:

1. Cria um campo de texto temporariamente oculto.
2. Copia o conteúdo do elemento para esse campo de texto.
3. Seleciona o conteúdo do campo de texto.
4. Executa a cópia comando como: document.execCommand("copy").
5. Remove o campo de texto temporário.

Você pode ver uma demonstração rápida aqui:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

O principal problema é que nem todos os navegadores suportam esse recurso no momento, mas você pode usá-lo nos principais:

• Chrome 43
• Internet Explorer 10
• Firefox 41
• Safari 10

Atualização 1: Isso também pode ser alcançado com uma solução JavaScript pura (sem jQuery):

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}

<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Observe que passamos o ID sem o # agora.

Como madzohan relatou nos comentários abaixo, há alguns problemas com a versão de 64 bits do Google Chrome em alguns casos (executando o arquivo localmente). Esse problema parece ter sido corrigido com a solução não-jQuery acima.

Madzohan tentou no Safari e a solução funcionou, mas usando em document.execCommand('SelectAll')vez de usar .select()(como especificado no bate-papo e nos comentários abaixo).

Como o PointZeroTwo aponta nos comentários , o código pode ser aprimorado para retornar um resultado de sucesso / falha. Você pode ver uma demonstração neste jsFiddle .

ATUALIZAÇÃO: COPIAR MANTER O FORMATO DO TEXTO

Como um usuário apontou na versão em espanhol do StackOverflow , as soluções listadas acima funcionam perfeitamente se você deseja copiar o conteúdo de um elemento literalmente, mas não funcionam muito bem se você deseja colar o texto copiado com o formato (como é copiado para um input type="text", o formato é "perdido").

Uma solução para isso seria copiar para um conteúdo editável dive copiá-lo usando o de execCommandmaneira semelhante. Aqui está um exemplo - clique no botão copiar e cole na caixa editável do conteúdo abaixo:

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

E no jQuery, seria assim:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

O clipboard.js é um bom utilitário que permite copiar dados de texto ou HTML para a área de transferência sem o uso do Flash. É muito fácil de usar; inclua apenas .js e use 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 .

Editar em 15 de janeiro de 2016: A resposta principal foi editada hoje para referenciar a mesma API na minha resposta postada em agosto de 2015. O texto anterior estava instruindo os usuários a usar o ZeroClipboard. Só quero deixar claro que eu não arranquei isso da resposta de jfriend00, e sim o contrário.

A simplicidade é a sofisticação final.
Se você não deseja que o texto a ser copiado fique visível:

jQuery:

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML:

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />

Com quebras de linha (extensão da resposta de Alvaro Montoro)

var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

Você pode usar esse código para copiar o valor de entrada na página na área de transferência, clicando em um botão

Este é html

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

Então, para este html, devemos usar este código JQuery

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

Esta é a solução mais simples para esta pergunta

Uma abordagem ainda melhor sem flash ou outros requisitos é o clipboard.js . Tudo que você precisa fazer é adicionar data-clipboard-target="#toCopyElement"qualquer botão, inicializá-lo new Clipboard('.btn');e ele copiará o conteúdo do DOM com o IDtoCopyElement para a área de transferência. Este é um trecho que copia o texto fornecido na sua pergunta por meio de um link.

Uma limitação, porém, é que ele não funciona no safari, mas funciona em todos os outros navegadores, incluindo navegadores móveis, pois não usa flash

$(function(){
  new Clipboard('.copy-text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

É muito importante que o campo de entrada não tenha display: none. O navegador não selecionará o texto e, portanto, não será copiado. Use opacity: 0com uma largura de 0px para corrigir o problema.

É um método mais simples de copiar o conteúdo

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

solução simples jQuery.

Deve ser acionado pelo clique do usuário.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

você pode simplesmente usar esta biblioteca para realizar facilmente o objetivo da cópia!

https://clipboardjs.com/

Copiar texto para a área de transferência não deve ser difícil. Não deve exigir dezenas de etapas para configurar ou centenas de KBs para carregar. Mas, acima de tudo, não deve depender do Flash ou de qualquer estrutura inflada.

É por isso que o clipboard.js existe.

ou

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

A biblioteca ZeroClipboard fornece uma maneira fácil de copiar texto para a área de transferência usando um filme invisível do Adobe Flash e uma interface JavaScript.

O texto a copiar está na entrada de texto, como: <input type="text" id="copyText" name="copyText"> e, no botão, clique acima do texto deve ser copiado para a área de transferência, portanto, o botão é como: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Seu script deve ser como:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

Para arquivos CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

nota : ZeroClipboard.swfe ZeroClipboard.js"o arquivo deve estar na mesma pasta que o seu arquivo usando esta funcionalidade, OU você deve incluir o que incluímos <script src=""></script>em nossas páginas.

A maioria das respostas propostas cria um elemento de entrada oculto temporário extra. Como a maioria dos navegadores atualmente oferece suporte à edição de conteúdo div, proponho uma solução que não cria elemento (s) oculto (s), preserva a formatação do texto e usa a biblioteca JavaScript ou jQuery pura.

Aqui está uma implementação de esqueleto minimalista usando o menor número de linhas de códigos que eu poderia pensar:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

A biblioteca Clipboard-polyfill é um polyfill para a moderna API de área de transferência assíncrona baseada em Promise.

instalar na CLI:

npm install clipboard-polyfill 

importar como área de transferência no arquivo JS

window.clipboard = require('clipboard-polyfill');

exemplo

Estou usando-o em um pacote require("babel-polyfill");e testado no chrome 67. Tudo de bom para a produção.

código html aqui

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

CÓDIGO JS:

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

você pode copiar um texto individual além do texto de um elemento HTML.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

JS puro, sem onclick embutido, para classes emparelhadas "conteúdo - botão de cópia". Seria mais confortável, se você tiver muitos elementos)

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Suporte para navegador mais antigo:

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Ambos funcionam como um encanto :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

Também em html,

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard