Cross-browser way of copying text to the Clipboard (Clipboard)

Question

I’m looking for ways to copy a text to the clipboard (Clipboard) via Javascript, which works on most modern browsers, but there is too much information and seems to me outdated. I know there is a Clipboard API and that she is partially supported for everyone (except Firefox, which implements totalmete). I would like to use it, but only find examples that use the ClipboardEvent - which is precisely the part not yet widely supported.

I rode a jsFiddle of example, that doesn’t even work in Firefox (infinite recursion in the event copy) nor in Chrome (ClipboardEvent unsupported). Follow the code:

$("textarea").bind("copy cut", function(e) {
    e.preventDefault();
    e.stopPropagation();

    // Fonte: http://stackoverflow.com/a/16036818/520779
    var textComponent = this;
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    var selectedText = textComponent.value.substring(startPos, endPos);

    var exemploTransformacao = selectedText.toUpperCase();

    // Fonte: https://datatables.net/blog/2014-01-31
    var clip = new ClipboardEvent('copy');
    clip.clipboardData.setData('text/plain', exemploTransformacao);
    clip.preventDefault();

    e.target.dispatchEvent(clip);
});

I would like an example that avoids this infinite recursion (it is caused because the Handler that creates the ClipboardEvent captures the event he created), and offers a workaround pro in case the browser does not support the ClipboardEvent.

Answer 1

Support from the Browsers

The support of Document.ExecCommand ('copy') has grown, take a look at the list of supported:

• IE8+
• Google Chrome 43+
• Mozilla Firefox 40+
• Opera 32+
• IOS Safari 8.4+
• Android Browser 4.1+

In more detail in: Can I use Document.execCommand()

Example:

var copyTextareaBtn = document.querySelector('.copiar');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.textarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'sim!' : 'não!';
    alert('Texto copiado? ' + msg);
  } catch (err) {
    alert('Opa, Não conseguimos copiar o texto, é possivel que o seu navegador não tenha suporte, tente usar Crtl+C.');
  }
});

<textarea class="textarea">Vamos copiar este texto?</textarea>
<br>
<button class="copiar">Copiar Texto</button>

Answer 2

In my particular case, there is no need to create a new ClipboardEvent, because I am dealing precisely with an event of copy or paste. In this case, just locate the original event, and assign the value to be sent to the clipboard:

e.originalEvent.clipboardData.setData("text", exemploTransformacao);

Example in jsFiddle. This example worked successfully on Chrome, Firefox, and Opera, but failed on IE11 and Safari. Also, if I wanted to use a command of my own to make that copy (for example copying by pressing a button, instead of just dealing with the case where the user started the action himself via the usual controls - Ctrl + C or Right Click + Copy) this solution would not be applicable, I believe. For now this suits me, but a more complete solution and really cross-browsers would be ideal.

Answer 3

Try the Clipboard.js.

You don’t use Flash. It has no dependencies. Only 2kb.

Super easy to use.

Answer 4

This is a new option, but I imagine that all browsers are already updated, it was ie 6, 7, 8 and 9 was already.

Works using the Document.execCommand('copy');command. With this command you will copy anything that is selected. Including spans, Divs, anything!

Works in Internet Explorer 10+, Chrome 43+, Opera 29+ and Firefox 41+.

Try it like this:

// setup the varriables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy   = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   textarea.select(); 

   try {

       // The important part (copy selected text)
       var successful = document.execCommand('copy');

       if(successful) answer.innerHTML = 'Copiado!';
       else answer.innerHTML = 'Não foi possível copiar!';
   } catch (err) {
       answer.innerHTML = 'Navegador sem suporte!';
   }
});

Html:

<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Clique para copiar</button> <span id="copyAnswer"></span>