Add copy button in Javascript

Question

I'm trying to add a button that will copy the text from a textarea using ZeroClipboard, however, when I click the button, nothing happens and when I paste nothing has been added to clipboard.

var clip = new ZeroClipboard( document.getElementById("btn4"), {
  moviePath: "https://rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.swf"
} );

clip.on( "load", function(client) {
  // alert( "movie is loaded" );

  client.on( "complete", function(client, args) {
    // `this` is the element that was clicked
    this.style.display = "none";
  } );
} );

<div id ="right" style = "float:left; width: 10%; margin-left:185px; margin-top:35px">
  <button id="btn4" data-clipboard-target="block2" name ="btn4" type="button" class="btn btn-success"><i class="icon-white icon-file"></i> Copy</button>

  <script src="https://rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.js"></script>
</div>

<textarea id="block2" name="block2" style="font-family:rockwell; background-color:#D1D1D1"></textarea>

Welcome to Stack Overflow. Please add more details to your question. What behavior are you expecting, and what are you actually seeing? — Palpatim, Jul 22 '15 at 18:45
I tried to make it work locally here, but the tool is probably buggy. Examples available at [jsfiddle.net/c3DUZ](http://jsfiddle.net/c3DUZ) and [jsfiddle.net/69RLv](http://jsfiddle.net/69RLv) don't work in my browser, and another member reported that they don't work either in Chrome or FireFox for him. Contact developers for help. Maybe some answer to this question might help you: [How do I copy to the clipboard in JavaScript?](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Gui Imamura, Jul 23 '15 at 14:02

score 0 · Accepted Answer · answered Jul 23 '15 at 19:02

Try:

<script language="JavaScript">
        var copyTextareaBtn = document.querySelector('.btn4');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.block2');
  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');
  }
});
</script>

Add copy button in Javascript

1 Answers1