I heard a share of H5 two days ago. There was a sentence at the meeting. I was very touched: It’s not that you can’t, but that you have too low requirements for yourself. In a very simple sentence, I believe that many things are not impossible for everyone to do, but they really have too low requirements for themselves. If you ask for more requirements for yourself, then you may make greater progress. Since growing up, many friends have also heard a lot of words that motivate themselves to make progress, but not everyone can keep doing it. In fact, this has a lot to do with their personality and the surrounding environment. I can only say that you can find more methods and conditions to encourage yourself, and constantly improve your requirements for yourself, so that you can have the opportunity to achieve more achievements.
In the second half of this year, I plan to build a site called "Mobile Development Guide" in the group. In the process of building the website framework, there is a function that needs to copy text to the clipboard. I believe this function is very commonly used, but it is a big challenge for me who don't write JS code frequently. Looking back on a site I used window.clipboardData to realize the copy to the clipboard function, and only supports IE and FF browsers. At that time, I found a few solutions on Baidu, but I gave up if I couldn't stand it. Later, I made a judgment in the code. If this attribute is not supported, I will directly alert: This function does not support the browser. Please copy the content in the text box manually. Now I think about it, I'm really lazy. Hehe, has anyone been shot~
alert("This function does not support this browser, please manually copy the content in the text box");There is actually no detailed explanation on the Internet on the Internet to realize the copy to clipboard function. Many articles are the same thousands of times. It is quite painful for children's shoes that need to use the copy to clipboard function. Today I will share this part. Due to limited ability, please give me some advice on the errors~
I believe that many students who have built a site using wordpress know that it uses jQuery. They are not unfamiliar with jQuery and are very simple to use. Unfortunately, jQuery itself does not realize the function of copying to the clipboard, but perhaps its API will have this function. This time the site I built uses wordpress and spent some time searching for the API for copying jQuery to the clipboard. There is also: jQuery ZeroClipboard, so I used it to simply implement the copy to the clipboard in wordpress. But, jQuery ZeroClipboard turned out to be a father named Zero Clipboard.
Zero Clipboard is a standalone js library that uses Flash for copying, requiring two files: ZeroClipboard.js and ZeroClipboard.swf. There are two versions on the Internet. The implementation principle is copied using flash. I don’t know whose original creation belongs to, or the two brothers of the family, so I don’t care about this. As long as we respect the copyright ourselves and express a clear conscience, the version I will introduce to you today is relatively simple.
First, let’s look at the following figure. The flash object generated after using Zero Clipboard. It is compatible with flash10 and the following versions and is compatible with all browsers:
Zero Clipboard's official address: http://zeroclipboard.org/, github address: https://github.com/zeroclipboard/ZeroClipboard
Use it to build a server environment. Some students may not be clear about it. There are many methods for building a server environment, such as XP or IIS that comes with win7 system. You can also use xampp, appserv, APMServ and other integration packages to install. It is very simple to build. I will not introduce it here~
Now we first use the independent js library Zero Clipboard to simply implement the copy to the clipboard function, and the demo is as follows:
<!DOCTYPE html><html><head><title>Zero Clipboard Test</title><meta charset="utf-8"></head><body><!--
illustrate:
1.data-clipboard-target Enter the ID of the object to be copied
--><button id="d_clip_button" data-clipboard-target="fe_text"><b>Copy to clipboard</b></button><br/><textarea id="fe_text" cols="50" rows="3">Enter what needs to be copied</textarea></body></html><script type="text/javascript" src="ZeroClipboard.js"></script><script type="text/javascript">// Define a new copy object var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {moviePath: "ZeroClipboard.swf"} );// The operation after successful copying content to the clipboard clip.on( 'complete', function(client, args) {alert("Copy successfully, copying content is: "+ args.text);} );</script>Demo download (warm reminder: Students who download the code, remember to use the server environment when browsing the demo, otherwise there will be no effect~)
The functions of Zero Clipboard have been introduced in the above code comments. For more functions, please go to https://github.com/zeroclipboard/ZeroClipboard
Next, introduce jQuery ZeroClipboard
jQuery ZeroClipboard is an improvement based on ZeroClipboard, referred to as zClip for short. As the API of jQuery, jQuery ZeroClipboard also performs very simple operations. The official address is: http://www.steamdev.com/zclip/
Before use, you need to refer to 2 js files: 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 demo as follows:
<!DOCTYPE html><html><head><title>ZeroClipboard Test</title><meta charset="utf-8"><style type="text/css">.line{margin-bottom:20px;}/* Copy prompt*/.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><h2>demo1 Click to copy the current text</h2><a href="#none">Click to copy me</a></div><div><h2>demo2 Click to copy the text in the form</h2><a href="#none">Click to copy the text in the copy order</a><input type="text" value="Enter what to copy" /></div></body></html><script type="text/javascript">$(document).ready(function(){/* Define all classes as copy tags, and after clicking, you can copy the text of the clicked object*/$(".copy").zclip({path: "ZeroClipboard.swf",copy: function(){return $(this).text();},beforeCopy:function(){/* Operation when holding the mouse*/$(this).css("color","orange");},afterCopy:function(){/* Operation after successful copy*/var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ Copy successfully</div></div>");$("body").find(".copy-tips").remove().end().append($copysuc);$(".copy-tips").fadeOut(3000);}});/* Define all classes as copy-input tags. After clicking, you can copy the text with class input*/$(".copy-input").zclip({path: "ZeroClipboard.swf",copy: function(){return $(this).parent().find(".input").val();},afterCopy:function(){/* Operation after copying*/var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ Copy successfully</div></div>");$("body").find(".copy-tips").remove().end().append($copysuc);$(".copy-tips").fadeOut(3000);}});});</script>Demo download (warm reminder: Students who download the code, remember to use the server environment when browsing the demo, otherwise there will be no effect~)
The above code combines the functions of jQuery's operation nodes and plays the role of jquery.zclip.js well, such as before and after copying, dynamically inserting nodes. It can also be seen that the power of jquery.zclip.js is very simple to use. If you need to know more about the functions of jquery.zclip.js, please go to http://www.steamdev.com/zclip/
From the above independent js libraries ZeroClipboard.js and jquery.zclip.js both use flash to implement the function of copying to the clipboard. It can be seen that using ZeroClipboard.js brings relatively few functions, but it is an independent library with relatively small files. The functions after using 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 copy method to use depends on the specific positioning of the product~
The above is the JS implementation of copying content to the clipboard function that the editor introduced to you is compatible with all browsers (recommended). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!