HTML5 Alternative to Flash-Based Zeroclipboard for Safe Copying of Data to Clipboard

Fire copy using javascript

<iframe src="https://cdn.rawgit.com/Triforcey/clip-j/38e8bf144e4633fffde57c675171b22211174e24/test.html" frameborder="0" width="100%" height="100%" style="margin: 0px;"></iframe>

ZeroClipboard - Add to values before copying

Setting the clipboard text can be done using the 'copy' event handler [v2.x] :

clip.on( "copy", function (event) {
    var clipboard = event.clipboardData;
    clipboard.setData( "text/plain", event.target.innerHTML + " <-- added this text!" );
    /*
     * for data-attribute use event.target.getAttribute("data-clipboard-text")
     */
});

http://jsbin.com/zumaluzoxo/edit?html,css,js
http://output.jsbin.com/zumaluzoxo/

For previous version [1.x] using the 'dataRequested' event handler:

client.on( 'dataRequested', function (client, args) {
  client.setText( this.getAttribute("data-clipboard-text") + "<- Copied me!" );
  /*
   * for text inside component use this.innerHTML
   */
});

Using data-clipboard-target

After hours I found a way. I think this is the one way if a user wants to use with two different HTML elements.

Sample code

<!DOCTYPE html>
<html lang="tr">
<body>
  <div>
    <button id="copy_id" type="button" class="clip_button" type="button">
        copy id value
    </button>                           
    <input id="client_id" type="text" readonly>
  </div>

  <div>
    <button id="copy_secret" type="button" class="clip_button">
      copy secret value
    </button>
    <input id="client_secret" type="text" readonly>
  </div>

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>

  <script>
    $(function() { // jquery main function

       // fill inputs using fictive data
       $("#client_id").val("ClientID112")
       $("#client_secret").val("ClientSecretWordSShh")

       // ***** copy to clipboard operations **********************
       var client = new ZeroClipboard( $('.clip_button'), {
           moviePath: "//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"
       } )

       client.on("copy", function(e) {
       var clipboard = e.clipboardData;
       if(e.target.id == "copy_id")
           clipboard.setData("text/plain", $("#client_id").val())
       else
           clipboard.setData("text/plain", $("#client_secret").val())
       })
       // ***** end of copy to clipboard operations ****************

    }) // end of jquery
  </script>
</body>
</html>

ZeroClipboard: Hiding element when there is no Flash in browser

If you create a button with something like:

var $button = $('.btn'),
    client = new ZeroClipboard($button);

you could do something like

client.on("error", function(e) {
     client.destroy();
     $button.hide();
}

jQuery copy multi-line list to clipboard

Note: this solution will work in IE10+, Chrome 43+, Opera 29+, and Firefox 41+. Not for Safari!

You're most of the way there, you just need to select() the <textarea> then use document.execCommand('copy') to load it into the clipboard.

var copyTextarea = document.querySelector('.auto');
$('button').click(function(element) {  var thelist = $('#someList').html();  thelist = thelist.replace(/\s+<li>/g, '');  thelist = thelist.replace(/<\/?li>/g, '\r');  $('.auto').val(thelist);  copyTextarea.select();  document.execCommand('copy');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Copy List</button><div class="listing">  <ul id="someList">    <li>1 million</li>    <li>Monday</li>    <li>Something</li>    <li>Foobar</li>    <li>1tsp blah</li>  </ul></div><textarea class="auto"></textarea>

Copy to Clipboard that also works on Mobile?

I just wanted to offer an update, since there have been some recent developments on this front. Modern browsers, except for Safari support copying via JS, using the execCommand() api.

Assuming you build your UI to gracefully degrade to manual copying for Safari, you could implement copy-to-clipboard on the rest of them. Presumably, Safari will include support for this eventually.

Look at https://clipboardjs.com/ and http://www.sitepoint.com/javascript-copy-to-clipboard/ for options.

Browsers supported, as of writing: Chrome 42+, Firefox 41+, IE 9+, Opera 29+.

Copy HTML table in rich text on click

Because a browser is a sand-boxed environment is usually rendered impossible by most browsers (IE a known exception) to copy to the system's clipboard, which is what you want without the aid of flash. You can use ZeroClipboard to aid in this if you still want to copy. Otherwise I suggest instructing users to press Ctrl+C to copy.

See this related post: HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?.