jquery Plugin Zclip Implement perfect compatible browser click Copy content to Clipboard

This article will combine examples to explain how to use a jquery based plug-in--zclip to copy content to the Clipboard function. In fact, ie there is a way to achieve click Replication, but because only ie unique, so we do not advocate. And Zclip is to use a hidden Flash file to complete the function of replication, the key is that it is compatible with the current mainstream browsers.

In web development, to allow users to copy a section of the page code, URL and other information, in order to avoid the user drag the mouse and then the right button copy operation and possible errors, we can directly in the page to place a copy button, just a little bit of this copy button, the content will be copied, The user can then paste where they want to paste.

Html

First you need to load the jquery library and Zclip plug-ins in the page, these two files have been packed, welcome to download.

?

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

We then add the following code to the body section of the page:

?

< textarea id = > Please enter content </ textarea >< br />  < a href = id = class = a >

The page is placed with an input box textarea, of course, it can be other HTML elements, then a copy button, can also be linked text form.

Javascript

When you click on "Copy Content", call the Zclip plug-in, and prompt replication success, see Code:

?

1 2 3 4 5 6 7 8 9 10 11

$(function(){    $('#copy_input').zclip({      path: 'js/ZeroClipboard.swf',      copy: function(){//复制内容        return $('#mytext').val();      },      afterCopy: function(){ //复制成功        $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功');      }    });  });

It is worth noting that if the content is copied from input box inputs, textarea, and so on, the Copy object uses:

?

1 2 3

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

If the content is copied from the page element Div, p, and so on, the Copy object uses:

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

This completes the ability to copy content to the Clipboard.