The jQuery plug-in Zclip is perfectly compatible with browsers. Click to copy content to the clipboard.

The jQuery plug-in Zclip is perfectly compatible with browsers. Click to copy content to the clipboard.

This article explains how to copy content to the clipboard using the jQuery-based plug-in Zclip. In fact, there is a way on IE to achieve click replication, but since it is only exclusive to IE, we do not advocate it. Zclip uses a hidden flash file for copying. The key is its compatibility with mainstream browsers.

In WEB development, users need to copy a piece of code, URL address, and other information on the page. To avoid errors that may occur when users drag the mouse and right-click the copy operation, you can directly place a copy button on the page. You only need to click this copy button to copy the content and paste it to the desired place.

HTML

First, you need to load the jquery library and zclip plug-in on the page. These two files have been packaged. Click to download them.

?

1 2	<script type="text/javascript" src="js/jquery.js"></script>  <script type="text/javascript" src="js/jquery.zclip.min.js"></script>

Then we add the following code to the body part of the page:

?

1 2	<textarea id="mytext"> Enter content </textarea><br/>  <a href="#" id="copy_input" class="copy"> Copy content </a>

The page contains an input box textarea, which can also be other html elements, followed by a copy button or link text.

Javascript

When you click "copy content", call the zclip plug-in and prompt that the copy is successful. Please refer to the Code:

?

1 2 3 4 5 6 7 8 9 10 11

$(function(){    $('#copy_input').zclip({      path: 'js/ZeroClipboard.swf',      copy: function(){// Copy content       return $('#mytext').val();      },      afterCopy: function(){// Copy successful       $("<span id='msg'/>").insertAfter($('#copy_input')).text('Copied successfully');      }    });  });

It is worth noting that if the copied content comes from input and textarea in the input box, the copy object uses:

?

1 2 3

copy: function(){    return $('#mytext').val();  }

If the copied content comes from the page elements such as div and p, the copy object uses:

Copy: $ ('# mytext'). text ();

In this way, the function of copying content to the clipboard is completed.