HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?

Question

With flash on the way out in many environments (iPhone, Android, IE10, etc...), is there any new solution forthcoming in any browsers that will allow a safe copy of information to the clipboard without flash installed?

I've been using ZeroClipboard so far, but I'm worried about more viewers that don't have flash and this functionality is going to be broken and I'd love to not depend on Flash whenever possible.

Answer 1

The reasoning is that automatic copying to clipboard can be very dangerous, thus most browsers (except IE)* make it difficult unless you use flash.

Much like your ZeroClipboard, there is Clipboard LMCButton which also uses a small flash script running in the background.

A common solution would be to do this:

 function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

Which I found from Jarek Milewski when some one else asked the question here

*Yes I found one solution for IE, however does not work in most modern browsers, check here.

Update:

According to this: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+, and IE 9+ support the copy command with execCommand. For firefox and chrome it will only work if triggered by a user action such as a click, and for IE it will give the user a warning dialog asking them for permission to copy to the clipboard.

Answer 2

I know this answer is coming a bit late, but there is now a new modern alternative to ZeroClipboard (which is Flash based). Clipboard.js is a 2kB pure JavaScript alternative that has no dependencies.

Answer 3

I have created a pure JavaScript solution called clip-j. Here it is. Basically what it does is it takes advantage of document.execCommand('copy'); with a few other commands that make it so you don't see anything. Here's the code:

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}

Answer 4

You can look at this blog post for an in-depth discussion of how to work with the clipboard in HTML5. Unfortunately, you still can't portably copy to the clipboard on click. However, for chrome and firefox you can create a browser extension that can give your site permission to access the clipboard, and I believe IE will let you copy to the clipboard, but will prompt the user to grant permission.

Update:

According to this: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+, and IE 9+ support the copy command with execCommand. For firefox and chrome it will only work if triggered by a user action such as a click, and for IE it will give the user a warning dialog asking them for permission to copy to the clipboard.

Answer 5

To use the execCommand, you must first select() something on the page, so you do not just copy whatever was last put into the clipboard. With this function, I pass the id of the input textbox into the function and select() it, then perform the copy command. No need to add listeners or further complicate your code. The document.execCommand() returns false if not enabled or supported, thus you can use the window.prompt as the backup method.

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

Use a standard "a" anchor tag with an onclick="copyToClipboard('some_id')"

Answer 6

There are great answers to this question, and I chose to use this snippet:

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

However, if there's bootstrap-select on your page, the $temp.val($(element).text()).select() line will throw an error:

Widget can only work on select elements

You can use .trigger('select') instead, as stated in the jQuery documentation for .select(), like this:

$temp.val($(element).val()).trigger('select');