The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.
<html>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>// main.js
var clip = new ZeroClipboard( document.getElementById("copy-button"), {
moviePath: "/path/to/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";
alert("Copied text to clipboard: " + args.text );
} );
} );See the instructions for more advanced options in using the library on your site.
Here is a working test page where you can try out ZeroClipboard in your browser.
To test the page demo page locally, clone the website repo.
This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.
Works in IE7+ and all of the evergreen browsers.
see CONTRIBUTING.md
- Can not have different handlers for different instances of ZeroClipboard (#90)
var clip1 = new ZeroClipboard(document.getElementById("copy-button-1"));
clip1.on('complete', function() {
console.log('Copy button 1');
});
var clip2 = new ZeroClipboard(document.getElementById("copy-button-2"));
clip2.on('complete', function() {
console.log('Copy button 2');
});
// click on copy-button-1 -> "Copy button 1"
// click on copy-button-2 -> "Copy button 1"Starting with version 1.1.7, ZeroClipboard uses semantic versioning.
see releases
see roadmap.md
