I heard a H5 sharing 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 the progress you make may be greater. 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 finding more methods and conditions to encourage themselves, and constantly increasing their requirements for themselves can have the opportunity to achieve more achievements.
The best copy code for 2023
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="/jquery-3.1."></script>
</head>
<body>
<span class="orange" data-url=""></span>
<script>
// copy function copyText(text) {
var textArea = ("textarea");
// ['display']='none'
['position'] = 'absolute'
['top'] = '0'
['left'] = '0'
= text;
(textArea);
();
();
try {
var successful = ('copy');
var msg = successful ? 'successful' : 'unsuccessful';
(msg)
} catch (err) {
('Copy failed', err);
}
(textArea);
if (successful) {
return true
}
};
$(function() {
var shareUrl = $("#shareUrl").data("url");
$("#shareUrl").click(function() {
var shareUrl = $("#shareUrl").data("url");
if (copyText(shareUrl)) {
alert("Copy successfully");
}
})
})
</script>
</body>
</html>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 to implement the copy to the clipboard function, it 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 am really lazy. Hehe, has anyone been shot~
alert("This function does not support this browser, please copy the content in the text box manually"); 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: and . 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: /, github address: /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:
-clipboard-target Enter the ID of the object to be copied
-->
<button class="my_clip_button" data-clipboard-target="fe_text"><b>Copy to clipboard</b></button>
<br/>
<textarea cols="50" rows="3">Enter the content you want to copy</textarea>
</body>
</html>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
// Define a new copy objectvar clip = new ZeroClipboard( ("d_clip_button"), {
moviePath: ""
} );
// Operation after successful copying of content to the clipboard( 'complete', function(client, args) {
alert("Copy successfully, the copy content is:"+ );
} );
</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 /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:/zclip/
2 js files need to be referenced before use: and
<script type="text/javascript" src="js/"></script> <script type="text/javascript" src="js/"></script>
Now we use the simple implementation of 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 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:(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=""></script>
<script type="text/javascript" src=""></script>
</head>
<body>
<div class="line">
<h2>demo1 Click to copy the current text</h2>
<a href="#none" class="copy">Click to copy me</a></div>
<div class="line">
<h2>demo2 Click to copy the text in the form</h2>
<a href="#none" class="copy-input">Click on the text in the copy order</a><input type="text" class="input" value="Enter what to copy" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/* Define all classes as copy tags, and click to copy the text of the clicked object */
$(".copy").zclip({
path: "",
copy: function(){
return $(this).text();
},
beforeCopy:function(){/* Operation when holding the mouse */
$(this).css("color","orange");
},
afterCopy:function(){/* Operation after successful 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);
}
});
/* Define all classes as copy-input tags, and click to copy the text with class as input */
$(".copy-input").zclip({
path: "",
copy: function(){
return $(this).parent().find(".input").val();
},
afterCopy:function(){/* Operation after successful 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 they will not see the effect~)
The above code combines the functions of jQuery's operation nodes, which plays excellent roles, such as before and after copying, dynamic insertion of nodes, and also shows the powerful features, which are very simple to use. If you need to know more about the functions, please visit/zclip/
From the above independent js library and the function of copying to the clipboard using flash, it can be seen that the use brings relatively few functions, but it is an independent library with relatively small files, and the functions after use are richer. However, for sites that do not use the jQuery framework, adoption 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 for my website!