Simple implementation compatible with the js of various browsers to copy content to clipboard _ jquery

I believe that this feature is frequently used when users access the internet. when they visit several frequently used websites, they use transparent flash to block the "Copy to clipboard" button. So when you click the button, click flash, and pass the content you want to copy to flash. Finally, the copied content is copied to the Clipboard through the flash copy function. Because the website article requires several buttons, click to copy the article content to the clipboard.

I searched a lot of content on the Internet and found it messy. I will sort it out and share it with you.

As follows:

Previously, windows. clipboardData. setData was used. Only IE and Firefox are supported. 360 browsers, such as sogou, all burst into tears. Therefore, we have studied ZeroClipboard and try to use js Code for writing.

Reference three items before use (this is not provided if attachments are not provided. It is very common. You can find them by yourself ):

Jquery-1.4.1.min.js
ZeroClipboard. js
ZeroClipboard.swf

The following is the simplest implementation.

Principle

Place an invisible Adobe Flash movie element into a DOM element. When users click the DOM element, they actually click the invisible Adobe Flash movie element. The Flash code is used to copy the content to the clipboard.

Note: If you use js to simulate a click event on that flash, you cannot copy the content to the clipboard. The reason is the security restrictions of browsers and flash.

A tag is a button. You can replace it with an image, but the id must be consistent with clip. glue ("copy_text.

Clip. setText (AddContent + document. getElementById ("id_p"). innerText + AddContent); di_p of this sentence is the ID of the Div to be copied. This ID can be the ID of another tag. The ID of the object to be copied.

Others are copied as they are. What you need to change is the top two lines. The first line is the tag to be copied. Generally, Your webpage already has one. You only need to set an ID for it. The first line can be deleted. The second line can be used freely. You can use hyperlinks or images as long as the ID is the same as the following.

For the three files prepared in advance, upload them to the path shown in the code. This is said to be running on the server. I uploaded it directly to the server for testing.

Here is the most simplified code. The mess on the internet is really unbearable, so I will share it with you in time. If you have any questions in this article, you can leave a message on your blog.

The following is the implementation code:

Text Content

Copy plain text content