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
helloooooooooooooo
ka hgo bhai
Hello.
I’ve beem trying to copy from input elements from one page to equivalent input element of another page ( kind of a data casting from source page to target page). I still not successfull.