clipboard.js does not require Flash and does not depend on any JS library to realize text copying and cutting_javascript skills

We place a copy button on the web page, which is mainly used to facilitate users to copy complex text such as links. In the past, we relied on Flash through JS, or even relied on the huge js library of jQuery to copy text to the clipboard. . What I want to introduce to you today is a very modern plug-in that does not require flash and does not rely on any other js libraries. It is called clipboard.js.

Operation rendering:

HTML
First load the local clipboard.js file.

<script src="clipboard.min.js"></script> 

Then add the text field content to be copied or cut and the button in the body.

<input id="foo" value="http://www.jb51.net/article/73145.htm"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button> 

Here, we use the data-attribute of HTML5 to locate the copy object target. It points to the text field #foo, indicating that the value content in #foo is copied. The aria-label attribute defines the copy after successful copying. Information, used to prompt copy result information.
There is also an attribute data-clipboard-action, which defines whether the current operation is copy or cut. The default is copy. When data-clipboard-action="cut", clicking the button will cut the text, just like the WORD operation. . Of course, the cut operation only works on text and textarea.
We also do not need the content of elements such as input and textarea as copy objects. We can define the content to be copied on the button through the ata-clipboard-text attribute. Click the button to copy to the content corresponding to ata-clipboard-text.

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button> 

Javascript
Add the following code to the 3f1c4e4b6b16bbbd69b2ee476dc4f83a before 36cc49f0c466276486e50c850b7e4956, save it, open it for browsing, and click the button to copy.

new Clipboard('.btn'); 

Of course we can further process it. For example, when the copy is completed, it will be more friendly to prompt the successful copy message. Just execute the following code:

var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 
 
 e.clearSelection(); 
}); 

The above is the text copying and cutting process that does not require flash or rely on any other js library. I hope it will be helpful to everyone's learning.