Simple implementation of js compatible with major browsers to copy content to the clipboard_jquery

Because website articles need to provide several buttons, click to copy the article content to the clipboard.

I searched a lot of content on the Internet and found that it is quite messy. Here I will sort it out and share it with everyone

The rendering is as follows:

I used window.clipboardData.setData before, which only supported IE and Firefox. 360 Browser, Sogou and other browsers were all in tears. Therefore, I studied ZeroClipboard and tried to use js code to write it.

Quote three things before use (no upload attachments are provided, so the download address is not provided here. It is very common. You can find a girl by yourself):

jquery-1.4.1.min.js
ZeroClipboard.js
ZeroClipboard.swf

The following is the simplest implementation, please explain it.

Principle

Place an invisible Adobe Flash movie element on a DOM element. When the user clicks on the DOM element, he actually clicks on the invisible Adobe Flash movie element, and the Flash code copies the content to the clipboard.

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

The a tag is a button. You can replace it with an image, etc., but the ID must be consistent with clip.glue("copy_text"); below.

clip.setText(AddContent document.getElementById("id_div").innerText AddContent); The di_div in this sentence is the ID of the Div to be copied. This ID can be the ID of other tags. Just write the ID of whatever you want to copy.

Copy the rest as they are. What you need to change are the top two lines. The first line is the tag that needs to be copied. Generally, it already exists on your web page. Just set an ID for him. Then the first line can be deleted. You can use the second line as you wish. You can use a hyperlink or a picture, as long as the ID is the same as the one below.

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

This is the most simplified code. The mess on the Internet is really unbearable to look at, so I will share it with everyone as soon as I make it. If you have questions about this article, you can leave a message on the blog.

The following is the implemented code:

<div id="id_div">文本内容</div><br><a href='#' id="copy_text" title="以纯文本形式复制">复制文章纯文本内容</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本原创文章来源：C++技术网，阅读更多原创精品文章，欢迎访问C++技术网。
\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("文章纯文本内容已经复制到剪切板！");
  });
});
</script>