Post
Ask Question

Copy Contents to Clipboard Using jQuery

Introduction

This article shows how to copy contents to the clipboard in the client side using jQuery. Once the data is in the clipboard you can paste it anywhere or you can manipulate it. I hope you will like it.
Please see this article in my blog: Copy contents to clipboard.

See demo

Copy To Clipboard Demo

Background

Today one of my colleague asked me how to copy contents to the clipboard so that he can do some work with the data. Since I was not aware of that, I said I will check and let him know. I have done the requirement by using a plugin zclip. It is perfect. I hope you will find it useful.

Using the code

To start with, you need to add the following references.

  • jQuery
  • JQuery.zclip
  1. <script src="jquery-1.11.1.min.js"></script>   
  2. <script src="jquery.zclip.js"></script>   
Add some UI elements
  1. <a href="http://sibeeshpassion.com/">Copy to clipboard demo at Sibeesh Passion</a>  
  2. <div style="margin: 25px;">  
  3.     <textarea id="myText" class="myText" onfocus="if(this.value=='Type contents here')this.value='';" onblur="if(this.value=='')this.value='Type contents here';">Type contents here</textarea>  
  4.     <button id="copyMe" class="copyMe">Copy</button>  
  5.     <button id="copyMeWithCallback" class="copyMe">Copy With Callback</button>  
  6.     <textarea style="margin-top: 25px;" id="copiedContent" class="myText" ></textarea>  
  7. </div>   
Add Styles
  1. < style > .copyMe {  
  2.     display: inline - block;  
  3.     height: 32px;  
  4.     width: 200px;  
  5.     position: relative;  
  6.     border - radius: 10px; - moz - border - radius: 10px; - webkit - border - radius: 10px;  
  7.     background - color: #0033CC;    
  8. color: # CCFFFF;  
  9. }.myText {  
  10.     display: block;  
  11.     border - radius: 10px; - moz - border - radius: 10px; - webkit - border - radius: 10px;  
  12.     width: 375px;  
  13.     padding: 10px;  
  14.     margin: 15px 0;  
  15.     height: 75px;  
  16.     border: 4px solid#ccc;  
  17.     margin - top: 0;  
  18. } < /style>  
Now you can see the page as follows.

copy
We will create the following two demos:
  • Without callback (Normal use)
  • With callback

Without callback (Normal use)

To work with a normal use, you need to add the following script:

  1. $("#copyMe").zclip({    
  2.    path: 'ZeroClipboard.swf',    
  3.    copy: function () {    
  4.       return $(this).prev().val();    
  5.    }    
  6. });  
Once you are done, run your page and type some content, then click on the “Copy” button. You can get the following alert:

click on Copy button
With callback
  1. $("#copyMeWithCallback").zclip({    
  2.    path: 'ZeroClipboard.swf',    
  3.    copy: $('#myText').val(),    
  4.    beforeCopy: function () {    
  5.       $('#copiedContent').text($('#myText').val() + '-- Before Copy');    
  6.    },    
  7.    afterCopy: function () {    
  8.       $('#copiedContent').text($('#myText').val() + '-- After Copy');    
  9.    }    
  10. });  
We are handling the following two events:
  • beforeCopy
  • afterCopy

You can do many processes in these two events, like updating the colour of your UI elements or text box. Here I am changing the text property.

Please run the preceding script and see the output as follows.

output
As you can see, we are changing the text property of our text area in those two events.

Since this copied data is in the clipboard, you can even paste that content anywhere. For example I am pasting that contents into Notepad as follows.

notepad

copy clipboard
Complete Code

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Copy to clipboard demo at Sibeesh Passion</title>  
  5.         <script src="jquery-1.11.1.min.js"></script>  
  6.         <script src="jquery.zclip.js"></script>  
  7.         <style>    
  8. .copyMe {    
  9. display: inline-block;    
  10. height: 32px;    
  11. width: 200px;    
  12. position: relative;    
  13. border-radius: 10px;    
  14. -moz-border-radius: 10px;    
  15. -webkit-border-radius: 10px;    
  16. background-color: #0033CC;    
  17. color: #CCFFFF;    
  18. }    
  19. .myText {    
  20. display: block;    
  21. border-radius: 10px;    
  22. -moz-border-radius: 10px;    
  23. -webkit-border-radius: 10px;    
  24. width: 375px;    
  25. padding: 10px;    
  26. margin: 15px 0;    
  27. height: 75px;    
  28. border: 4px solid #ccc;    
  29. margin-top: 0;    
  30. }    
  31. </style>  
  32.     </head>  
  33.     <body>  
  34.         <a href="http://sibeeshpassion.com/">Copy to clipboard demo at Sibeesh Passion</a>  
  35.         <div style="margin: 25px;">  
  36.             <textarea id="myText" class="myText" onfocus="if(this.value=='Type contents here')this.value='';" onblur="if(this.value=='')this.value='Type contents here';">Type contents here</textarea>  
  37.             <button id="copyMe" class="copyMe">Copy</button>  
  38.             <button id="copyMeWithCallback" class="copyMe">Copy With Callback</button>  
  39.             <textarea style="margin-top: 25px;" id="copiedContent" class="myText" ></textarea>  
  40.         </div>  
  41.         <script>    
  42. $(document).ready(function () {    
  43. $("#copyMe").zclip({    
  44. path: 'ZeroClipboard.swf',    
  45. copy: function () {    
  46. return $(this).prev().val();    
  47. }    
  48. });    
  49. $("#copyMeWithCallback").zclip({    
  50. path: 'ZeroClipboard.swf',    
  51. copy: $('#myText').val(),    
  52. beforeCopy: function () {    
  53. $('#copiedContent').text($('#myText').val() + '-- Before Copy');    
  54. },    
  55. afterCopy: function () {    
  56. $('#copiedContent').text($('#myText').val() + '-- After Copy');    
  57. }    
  58. });    
  59. });    
  60. </script>  
  61.     </body>  
  62. </html>  
Conclusion

I hope you will find this article useful. Please share me your valuable thoughts and comments. Your feedback is always welcomed.
Thanks in advance. Happy coding!


Similar Articles