March 4, 2024 5:03 am

How to copy text to Clipboard using jQuery

In this tutorial I am going to show you how to copy text in clipboard without ctrl+c and ctrl+v I have used jQuery Clipboard plugin (zclip) to perform this task. The JavaScript clipboard functionality is disabled by the most of the browser due to security risk so this plugin use a dynamic flash file.

How to copy text to Clipboard using jQuery

[wpdm_file id=70]DEMO

Usage

It’s very simple and short code to understand and easy to integrate:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script src="jquery.zclip.js"></script>

jQuery library and zclip library include to handle copy procedure.

jQuery

jQuery to trigger library:

$(document).ready(function(){
   $("a#copy-link").zclip({
      path:"ZeroClipboard.swf",
      copy:function(){return $("input#copy-box").val();}
   });
});

Here is the main logic we used a swf file which use flash action script to copy text because modern browsers disabled copy to clipboard so we used flash file for reference script used to create flash action script available here.

HTML text box and link:

<input type="text" id="copy-box" value="PHPGang demo is available!!" />
<a href="#copy" id="copy-link">Copy Now</a>

All together

Here we create complete procedure with jQuery, CSS and HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>How to copy text to Clipboard using jQuery | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script src="jquery.zclip.js"></script>
<style>
#dynamic {
    font-size: 15px;
    height: 28px;
    width: 357px;
}
</style>

<script>
    $(document).ready(function(){
        $("a#copy-dynamic").zclip({
           path:"ZeroClipboard.swf",
           copy:function(){return $("input#dynamic").val();}
        });
    });
</script>
  </head>
  <body>
    <h2>How to copy text to Clipboard using jQuery Example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>

<input type="text" id="dynamic" value="PHPGang demo is available!!" />
<a href="#copy" id="copy-dynamic">Copy Now</a>
</body>
</html>
[wpdm_file id=70]DEMO

I hope it helps you guys please give your feedback in comments.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

13 responses to “How to copy text to Clipboard using jQuery”

  1. Matthew says:

    But how do we attach the swf object for dynamically created elements ???

    • huzoorbux says:

      You don’t need to attach swf file just give its path in jQuery like this it will work itself path:”ZeroClipboard.swf”,.

  2. Sergey S says:

    Many thanks for your article

    I monetized some functional

  3. LiuXing says:

    I can’t copy text to clipboard, I don’t know why?

    Please help me.

    I have already copy above tutorial code and link jquery.zclip.js and ZeroClipboard.swf.

  4. Nahuel Esteban Castro says:

    Is there any possibility that the text is copied without pressing the button.
    Thank very much the code above is great.

  5. kamal says:

    where is the flash plugin.I unable to download it

  6. ehxp says:

    Does support Opera browser?

    p.s
    works flawlessly, I tried it now, thank you

  7. Raghbendra Nayak says:

    Its working fine great thanks…..

  8. techfuse12 says:

    Demo not working with Chrome

  9. zfdo says:

    Works fine. tk

  10. Chan says:

    Hi, the script what I have downloaded from this site is not working in chrome(latest)/IE10. but there were no errors in script (when I click the CopyNow link, the text is not copied to clipboard). Could you pls tell me what could be the reason.

  11. Nagaraju Kakaraparthi says:

    Hi, it not working Mozilla firefox. I think flash plugin problem. how to resolve it ?

  12. Nilesh Daldra says:

    if i need to integrate on multiple buttons then???and that button are generated with ajax call..so how can i implement on this.

    my buttons like

    Copy

    Copy

    Copy

    Copy

    Copy

Leave a Reply

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