Simple implementation compatible with the js of various browsers to copy content to the clipboard, js cut

Simple implementation compatible with the js of various browsers to copy content to the clipboard, js cut

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_div"). innerText + AddContent); di_div 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:

<Div id = "id_div"> text content </div> <br> <a href = '#' id = "copy_text" title = "copy in plain text"> copy an article plain text content </a> <br> <script type = "text/javascript" src = "/js/global/jquery-1.4.1.min.js"> </script> <script type = "text /javascript "src ="/js/global/ZeroClipboard. js "> </script> <script type =" text/javascript "> var clip = null; ZeroClipboard. setMoviePath ("/js/global/ZeroClipboard.swf"); $ (document ). ready (function () {var AddContent = "\ r \ n Source of this original article: C ++ Technology Network. Read more original high-quality articles. Welcome to the C ++ Technology Network. \ R \ n "; clip = new ZeroClipboard. client (); clip. setHandCursor (true); clip. setText (AddContent + document. getElementById ("id_div "). innerText + AddContent); clip. glue ("copy_text"); clip. addEventListener ("complete", function () {alert ("the plain text content of the article has been copied to the clipboard! ") ;}); </Script>