clipboard botão texto - Como faço para copiar para a área de transferência em JavaScript?




15 Answers

A cópia automática para a área de transferência pode ser perigosa, portanto, a maioria dos navegadores (exceto o IE) torna isso 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 é apresentado com a caixa de diálogo, onde o texto a ser copiado já está selecionado. Agora é o suficiente para pressionar Ctrl + C e Enter (para fechar a caixa) - e voila!

Agora, a operação de cópia da área de transferência é SEGURA, porque o usuário faz isso manualmente (mas de uma maneira bem direta). Claro, 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>

colar da area

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 isso dá um erro de sintaxe. No Firefox, ele diz que o unsafeWindow is not defined .

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




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

Clippy

Foi escrito por um co-fundador do Github. Exemplo de código de incorporação 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} com uma cor.




Recentemente, escrevi uma postagem técnica sobre esse mesmo problema (eu trabalho na Lucidchart e recentemente fizemos uma revisão em nossa área de transferência).

Copiar texto simples 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 Ctrl C ou 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 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 através do Flash, que é a única maneira de fazer o navegador cruzado (tanto quanto eu entendo).

Fora isso, existem algumas opções em uma base de navegador por navegador.

Este é o mais simples no IE, onde você pode acessar o objeto clipboardData a qualquer momento 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 a permissão de transferência do aplicativo da Web.)

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

document.execCommand('copy');

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




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

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



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

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




Os outros métodos copiarão texto simples 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 SOMENTE . Isso é fundamentalmente diferente dos outros métodos, pois o navegador 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();   



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

A solução é excessivamente um objeto flash acima do botão Copiar ou qualquer elemento que inicie a cópia. O Zero Clipboard é atualmente a melhor biblioteca com essa implementação. Experientes desenvolvedores de Flash podem apenas querer fazer sua própria biblioteca.




Eu encontrei a seguinte solução:

Eu tenho o texto em uma entrada oculta. Como setSelectionRangenão funciona em entradas ocultas, mudei temporariamente o tipo para texto, copiei o texto e depois o ocultei novamente. Se você quiser copiar o texto de um elemento, você 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;
    }



Copiar 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 IE9 e anterior.

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







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

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), defina o foco (por exemplo, quando o usuário pressionar Ctrl) e selecione todo o texto.

Então, quando o usuário acertar Ctrl+ Cele obtém as células copiadas que ele selecionou. Depois de testar apenas o redimensionamento da área de texto para 1 pixel (não testei se ele estaria trabalhando em exibição: nenhum). Funciona muito bem em todos os navegadores e é transparente para o usuário.

Colando - você poderia fazer o mesmo assim (difere no seu alvo) - manter o foco na textarea e pegar colar eventos usando onpaste (no meu projeto eu uso textareas nas células para editar).

Eu não posso colar um exemplo (projeto comercial), mas você entendeu.




Muitas respostas já, mas eu gosto de adicionar um (jQuery). Funciona como um encanto em qualquer navegador, também aqueles móveis (ou seja, solicita sobre segurança, mas quando você aceita apenas funciona bem).

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

Em seu código:

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



Parece que eu interpretei mal a questão, 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:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>



Para copiar um texto selecionado ('Text To Copy') para sua área de transferência, crie um Bookmarklet (bookmark do navegador que executa o Javsacript) e execute-o (clique nele). Ele criará uma área de texto temporária.

Código do Github:

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

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



Eu tive que copiar o texto das caixas que não são de entrada (texto em qualquer tag div / span) da página e criar o código a seguir. O único truque é ter um campo oculto, mas como o tipo TEXT, não funciona com o tipo oculto.

    function copyToClipboard(sID) {
        var aField = document.getElementById("hiddenField");

        aField.hidden   = false;
        aField.value    = document.getElementById(sID).textContent;
        aField.select();
        document.execCommand("copy");
        alert("Following text has been copied to the clipboard.\n\n" + aField.value);
        aField.hidden = true;
    }

E no HTML, adicione o seguinte

tipo de entrada = "texto" id = "hiddenField" estilo = "largura: 5px; borda: 0" /> ...






Related