Clipboard.js without flash need not rely on any JS library to achieve text copying and shearing _javascript skills

We placed a copy button on the Web page, mainly used to facilitate the user to copy links and other complex text, the past practice is, through JS rely on flash, even with the help of jquery large JS library to achieve the text copied to the Clipboard. Today I would like to introduce you to a very modern, do not need flash, do not rely on any other JS library very small plug-ins, it is called clipboard.js.

Run Effect chart:

Html
The local clipboard.js file is loaded first.

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

Then you add the Text field contents and buttons that you want to copy or cut in the body.

<input id= "foo" value= "http://www.jb51.net/article/73145.htm" > 
<button class= "BTN" data-clipboard-target= "#foo aria-label=" replication success! "> Replication </button> 

Here, we use the HTML5 data-property to locate the target of the copied object, which points to the text field #foo, which means that the value content in the #foo is replicated, and the Aria-label attribute defines the successful replication information to prompt the replication of the result information.
There is also an attribute data-clipboard-action that defines whether the current operation is copy or cut, the default is copy, and when data-clipboard-action= "cut", clicking the button cuts the text as it does in Word. Of course, the cut operation applies only to text and textarea.
We can also do not need the input and textarea element content as a copy object, we can copy the content through the Ata-clipboard-text attribute defined on the button, click the button can be copied to the ata-clipboard-text corresponding content.

<button class= "btn" data-clipboard-text= "Here is the copy of the content" aria-label= "replication success! "> Replication </button> 

Javascript
Add the following code to the <script> before </body>, save and browse, click the button to copy.

New Clipboard ('. btn '); 

Of course we can deal with it further, for example, when the replication is complete, it is more friendly to prompt for replication success, as long as the following code is executed:

var clipboard = new Clipboard ('. btn '); 
 
Clipboard.on (' Success ', function (e) { 
 var msg = e.trigger.getattribute (' Aria-label '); 
 Alert (msg); 
 
 E.clearselection (); 

The above is, do not need flash, do not rely on any other JS library to achieve the text copy and cut the implementation process, I hope to help you learn.