Javascript copy to clipboard example

Era BalliuNovember 10th, 2014Last Updated: June 20th, 2018

2 947 2 minutes read

If you use any scripts for syntax highlighting, then you have seen that most of them have “copy to clipboard” as an option. And now you want to use that in your next project. But how? You don’t even need to worry, we’ve got you covered. Just follow along.

We will use:

Javascript
Flash
Zero Clipboard

Copy to Clipboard in Internet Explorer

The easiest and most efficient way to build the Copy to Clipboard feature is in Internet Explorer.

First you put this code in the body section of your index.html file:

<a href="#" id="copy" onclick="copyToClipboard(document.getElementById('pre').innerHTML)">Copy to clipboard</a>
<pre id="pre">
Web Code Geeks Example on JavaScript Copy to Clipboard Feature
</pre>

Next, you put the following code in your app.js file:

function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
}

Don’t forget to script the app.js file in your index.html like this:

<script src="app.js"></script>

And with that, you’re set. As soon as you click on the “copy to clipboard” link, the text in <pre> tags will be copied. But what happens if Internet Explorer is not the browser of your choice (mine either)?

We’ll show you the solution below.

For other browsers: Flash

For browsers other than IE, there’s no pure JavaScript solution for the “copy to clipboard” feature. That’s where Flash appears in our view.

The browsers use a small Flash file to do the job: copy a string to a clipboard. This Flash file is actually embedded into the page but it’s invisible if you set the width: 0; and height: 0;. The code will go like this:

function copyToClipboard(s) {
    // for IE
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
    // for other browsers
    else {
        var flashcopier = 'flashcopier';
        if(!document.getElementById(flashcopier)) {
            var divholder = document.createElement('div');
            divholder.id = flashcopier;
            document.body.appendChild(divholder);
        }
        document.getElementById(flashcopier).innerHTML = '';
        var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(s)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
        document.getElementById(flashcopier).innerHTML = divinfo;
    }
}

This idea is good, and works for most cases, but problems arise with Flash 10. For security reasons every action regarding clipboards requires user interaction (read more here, in the Clipboard section). This problem occurs because the flash file is written with an old version of it, when security was not reinforced.

The simplest solution to solve this is to modify the flash file’s source code to work with Flash 10 and all is well.

Zero Clipboard: A JavaScript library

If you don’t have access to the flash file’s source code, then you would have to find another way, which in our case is using the well-developed JavaScript library Zero Clipboard. Zero Clipboard in itself uses a flash file that works well with Flash 10. So let’s make it work.

Put this code in the body section of index.html:

<button id='#copy_button' data-clipboard-target='to_copy'><b>Copy To Clipboard</b></button>

<p id='to_copy'>Web Code Geeks Copy to Clipboard example</p>

Now download Zero Clipboard and extract it in your project’s directory. Then find the ZeroClipboard.js file and script it in your index.html. It should look similar to this:

  <script type="text/javascript" src="zeroclipboard-2.1.6/dist/ZeroClipboard.js"></script>

Then it’s time to place this code in your app.js file:

$(document).ready(function() {

    var clip = new ZeroClipboard($("#copy_button"), {
        moviePath: "zeroclipboard-2.1.6/dist/ZeroClipboard.swf"
    });
});

And with this, you’re ready to go. Just remember, no testing locally, as the flash file in Zero Clipboard imposes security restrictions. You should test it online.