JS implements copy to clipboard functionality compatible with of recommendations for all browsers

  • 2021-06-28 11:17:38
  • OfStack

I heard an H5 share two days ago, and there was a sentence at the meeting that touched me very much: not that you can't, but that your requirements for yourself are too low.A very simple sentence, I believe that many things are not impossible for everyone to do, it is really too low for your own requirements, if you ask for more than 1 point for yourself, you may make greater progress.Since growing up, many friends have heard a lot of words to motivate themselves, but not everyone can keep doing it. In fact, this has a lot to do with their own character and the surrounding environment. Only by finding more ways and conditions to encourage themselves, and constantly increasing their requirements, can they have the opportunity to achieve more than 1 point of success.

In the second half of this year, we plan to build a site called "Mobile Development Guide" in the group. During the process of building the website framework, there is a function to copy text to clipboard. I believe this function is very common, but it is a big challenge for me who don't write JS code often. Recall that I have done before, using window.clipboardData to copy to clipboard.Only IE and FF browsers are supported. At that time, Baidu found several solutions and gave up without looking at them. Later, we made a judgment in the code. If not, we directly alert: This function does not support this browser. Please copy the contents in the text box manually. Now think it's lazy, hey, anybody shot it~


alert(" This feature does not support this browser , Copy the contents of the text box manually "); 

Now in fact, the network does not have a more detailed explanation of js's copy to clipboard function, many articles are a rule of thousands of times. For children's shoes that need to use copy to clipboard function, it is more painful. Today, this share will be brought to you. Because of limited ability, there are errors, please give us more advice~

It is believed that many students who have built the site using wordpress know that it uses jQuery. They are not unfamiliar with jQuery and it is very simple to use. Unfortunately, jQuery itself does not implement the function of copying to the clipboard, but perhaps its API will have this function.This time I set up a site using wordpress, spent some time searching for jQuery to copy to the clipboard API, there is really: jQuery ZeroClipboard, so use it in wordpress to simply implement the copy to the clipboard function.However, jQuery ZeroClipboard was originally an adult father named Zero Clipboard.

Zero Clipboard is a stand-alone js library that uses Flash for replication and requires two files: ZeroClipboard.js and ZeroClipboard.swf.There are two versions on the network, all of which are duplicated by flash. We don't know who the original is, or maybe two brothers of a family. That's all right. As long as we respect copyright and have a good conscience, this version introduced to you today is relatively simple.

First of all, the following is an flash object generated after using Zero Clipboard. It is compatible with flash10 and below, and compatible with all browsers:

Official address of Zero Clipboard: http://zeroclipboard.org/, github address: https://github.com/zeroclipboard/ZeroClipboard

There are many ways to set up a server environment, such as xp or win7 system's own IIS. You can also use xampp, appserv, APMServ and other integration packages to set up a server environment. It is easy to set up, it is not described here ~

Now let's start with a simple copy-to-clipboard function using the stand-alone js library Zero Clipboard, as follows:


<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!-- 

Explain:

1.data-clipboard-target Enter ID for the object to be copied


-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b> copy to clipboard </b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3"> Enter what you want to copy </textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
//  Definition 1 New Copy Object 
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
moviePath: "ZeroClipboard.swf"
} );
//  Copy content to clipboard after success 
clip.on( 'complete', function(client, args) {
alert(" Copy succeeded with: "+ args.text);
} );
</script> 

demo Download (Warm Tip: Students downloading code, remember to use the server environment when browsing demo, otherwise you will not see any effect~)

The functions of Zero Clipboard have been described in the code comments above. For more information, see https://github.com/zeroclipboard/ZeroClipboard

Next, jQuery ZeroClipboard

jQuery ZeroClipboard is an improvement based on ZeroClipboard, referred to as zClip. As API of jQuery, jQuery ZeroClipboard also shows very easy operation. Official address: http://www.steamdev.com/zclip/

Two js files need to be referenced before use: jquery.js and jquery.zclip.js


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

Now we use jquery.zclip.js to simply implement the copy to clipboard function demo as follows:


<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<style type="text/css">
.line{margin-bottom:20px;}
/*  Copy Tips  */
.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
</head>
<body>
<div class="line">
<h2>demo1  Click to copy the current text </h2>
<a href="#none" class="copy"> Click Copy Me </a>
</div>
<div class="line">
<h2>demo2  Click on the text in the copy form </h2>
<a href="#none" class="copy-input"> Click on the text in the copy list </a>
<input type="text" class="input" value=" Enter what you want to copy " />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/*  Define All class by copy Tag, which copies the text of the clicked object  */
$(".copy").zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(this).text();
},
beforeCopy:function(){/*  Action while holding down the mouse  */
$(this).css("color","orange");
},
afterCopy:function(){/*  Operation after successful replication  */
var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺  Copy succeeded </div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
/*  Define All class by copy-input Tag, Click to copy class by input Text  */
$(".copy-input").zclip({
path: "ZeroClipboard.swf",
copy: function(){
return $(this).parent().find(".input").val();
},
afterCopy:function(){/*  Operation after successful replication  */
var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺  Copy succeeded </div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
});
</script>

demo Download (Warm Tip: Students downloading code, remember to use the server environment when browsing demo, otherwise you will not see any effect~)

The above code combines the functions of the operation node of jQuery to make the best use of jquery.zclip.js, such as operations before and after replication, dynamic insertion of nodes, and the power of jquery.zclip.js, which is very simple to use.To learn more about the functions of jquery.zclip.js, go to http://www.steamdev.com/zclip/

From the above standalone js libraries ZeroClipboard.js and jquery.zclip.js, which are both implemented by flash to copy to the clipboard, we can see that ZeroClipboard.js brings relatively few functions, but it is a standalone library with relatively small files, and the functions after jquery.zclip.js are relatively rich.However, for sites that do not use the jQuery framework, using jquery.zclip.js is a waste of broadband.Which replication method to use depends on the specific positioning of the product~


Related articles: