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

Source: Internet
Author: User
Tags comments jquery library

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.


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.


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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.