tag Clique no botão copiar para a área de transferência usando jQuery




javascript copiar texto input (15)

Como faço para copiar o texto dentro de um div para a área de transferência? Eu tenho um div e preciso adicionar um link que irá adicionar o texto para a á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 que eu clico em copiar texto, pressiono Ctrl + V e ele deve ser colado.


Answer #1

Ambos vão funcionar como um encanto :),

  1. 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>
  1. JQUERY:

paulund.co.uk/jquery-copy-clipboard


Answer #2

Ambos vão funcionar 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: paulund.co.uk/jquery-copy-clipboard


Answer #3

solução simples jQuery.

Deve ser acionado pelo clique do usuário.

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

Answer #4

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

Answer #5

A simplicidade é a sofisticação final.
Se você não quiser 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;"><input>

Answer #6

O texto a copiar está em 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, então o botão é: <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

Nota : ZeroClipboard.swf e ZeroClipboard.js "arquivo deve estar na mesma pasta que seu arquivo usando esta funcionalidade é, ou você tem que incluir como nós incluímos <script src=""></script> em nossas páginas.


Answer #7

você pode simplesmente usar este lib para perceber 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 inchada.

É por isso que o clipboard.js existe.

ou

https://github.com/zeroclipboard/zeroclipboard

ZeroClipboard

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.


Answer #8

A maioria das respostas propostas cria um elemento de entrada oculto temporário extra. Como a maioria dos navegadores suporta atualmente a edição de conteúdo div, proponho uma solução que não crie elementos ocultos, preserve a formatação de texto e use JavaScript puro ou biblioteca jQuery.

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

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


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

Answer #10

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

Por exemplo, esta função irá copiar o conteúdo do elemento passado para a área de transferência (atualizado com sugestão nos 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 oculto temporário.
  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 do 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" />

A questão principal é que nem todos os navegadores suportam esse recurso no momento, mas você pode usá-lo nos principais de:

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

Atualização 1: Isso pode ser alcançado também 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" />

Note que nós passamos o id sem o # agora.

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

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

Como PointZeroTwo , o código poderia ser melhorado para retornar um resultado de sucesso / falha. Você pode ver uma demonstração neste jsFiddle .

ATUALIZAÇÃO: COPIAR MANTENDO O FORMATO DE TEXTO

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

Uma solução para isso seria copiar em um div editável de conteúdo e copiá-lo usando o execCommand maneira semelhante. Aqui há 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>


Answer #11

clipboard.js é um ótimo utilitário que permite copiar texto ou dados HTML para a área de transferência sem usar o Flash. É muito fácil de usar; apenas inclua o .js e use algo assim:

<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 fazer referência à mesma API em minha resposta publicada em agosto de 2015. O texto anterior estava instruindo os usuários a usarem o ZeroClipboard. Só quero deixar claro que não tirei isso da resposta de jfriend00, e sim ao contrário.


Answer #12

É 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: 0 com uma largura de 0px para corrigir o problema.


Answer #13

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

Answer #14

Melhor abordagem sem flash ou qualquer outro requisito é o https://clipboardjs.com/ . Tudo o que você precisa fazer é adicionar data-clipboard-target="#toCopyElement" em qualquer botão, inicializar o new Clipboard('.btn'); e copiará o conteúdo do DOM com o id toCopyElement para a área de transferência. Esse é um snippet que copia o texto fornecido na sua pergunta por meio de um link.

Uma limitação é que ele não funciona no safari, mas funciona em todos os outros navegadores, incluindo os navegadores móveis, já que ele 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>


Answer #15

É um método mais simples para 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'));
                    });




css