Home » JavaScript » Javascript copy to clipboard example

About Era Balliu

Era Balliu
Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.

Javascript copy to clipboard example

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 Interview Coming Up?

Subscribe to our newsletter and download the Ultimate JavaScript interview questions and answers collection right now!

In order to get you prepared for your next JavaScript interview, we have compiled a huge list of relevant questions and their respective answers. Besides studying them online you may download the eBook in PDF format!

 

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.

Download the source code for Javascript Copy to Clipboard Example

This was an example of Copy to Clipboard feature, using Javascript.

Download
You can download the source code for this example here: CopyToClipboard

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

2 comments

  1. Example of Copy to Clipboard feature, using Javascript is not working.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook