ZeroClipboard is a library that provides you with a way of coping text to your clipboard using Adobe flash and a Javascript interface. Flash can access your computers clipboard because you have to install flash and agree to the security settings, therefore we have to use flash to access the clipboard. We can use Javascript as an interface to flash so we can start this off with a click event on a button.
How to use ZeroClipboard
1. Download ZeroClipboard Flash file(ZeroClipboard.swf) and Javascript file(ZeroClipboard.js) from http://zeroclipboard.org/.
2. After Downloading .swf and .js files initialize ZeroClipboard scripts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script src="ZeroClipboard.js"></script> <script type="text/javascript"> function initialize() { ZeroClipboard.setMoviePath('ZeroClipboard.swf'); clip = new ZeroClipboard.Client(); clip.setHandCursor(true); //event clip.addEventListener('mousedown', function() { clip.setText(document.getElementById('Link').value); }); clip.addEventListener('complete', function(client, text) { alert('copied: ' + text); }); //glue it to the button clip.glue('copy'); } jQuery('document').ready(function() { var clip = null; initialize(); }); </script> |
3. Now attach copy to clipboard functionality to a html anchor link.
|
1 2 3 4 |
<form> <input readonly="true" type="text" id="Link" value="http://ziyedbd.wordpress.com/"/> </form> <a id='copy' >Copy To Clipboard</a> |
Complete Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="ZeroClipboard.js"></script> <script type="text/javascript"> function initialize() { ZeroClipboard.setMoviePath('ZeroClipboard.swf'); clip = new ZeroClipboard.Client(); clip.setHandCursor(true); //event clip.addEventListener('mousedown', function() { clip.setText(document.getElementById('link').value); }); clip.addEventListener('complete', function(client, text) { alert('copied: ' + text); }); //glue it to the button clip.glue('copy'); } jQuery('document').ready(function() { var clip = null; initialize(); }); </script> </head> <body> <form> <input readonly="true" type="text" id="link" value="https://arjunphp.com/"/> </form> <a id="copy" >Copy To Clipboard</a> </body> </html> |
for ZeroClipboard Documentation visit github page or official website pages.
1. http://zeroclipboard.org/
2. https://github.com/zeroclipboard/zeroclipboard
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
