Do not rely on flash and any JS library to achieve text replication and shear attached source download _javascript Tips

The effect chart is as follows:

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.

View Demo Download source code

Html

The local clipboard.js file is loaded first.

Copy Code code as follows:

<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.

Copy Code code as follows:

<input id= "foo" value= "http://www.jb51.net/demo/clipboard/" >
<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.

Copy Code code as follows:

<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 content is small to share with you do not rely on flash and any JS library to achieve the text copy and shear source download, I hope you like.