GOOCODE - Find your code/scripts

1 We place a copy button on the page, it is mainly used to facilitate the user to copy a complex text links and the like, the conventional approach is to rely on Flash through JS, even by means of a huge jQuery js library to implement text copied to the clipboard. Today, I give you about is a very modern, no flash, does not rely on any other js very small plug-in libraries, it is called clipboard.js.


HTML
Clipboard.js is first loaded as local files.

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

And then add to copy or cut the contents of a text field and a button in the body.

<input id="foo" value="http://www.goocode.net"> 
<button class="btn" data-clipboard-target="#foo" aria-label="Copy Success!">Copy</button> 

Here, we use the HTML5 data- attribute, used to locate the target object is copied, it points to a text field #foo, dub is #foo the value content, aria-label attribute defines the information copied successfully, with the copy the results to prompt information.
There is a property of data-clipboard-action, which defines the current operation is to copy or cut, copy default, when data-clipboard-action = "cut", then, click on the button will cut the text, with the same operating WORD . Of course, the cut operation applies only to text and textarea.
We can also do not need to input and textarea elements such content to be copied, we can be content to be copied by ata-clipboard-text attribute is defined on a button, click the button can be copied to the corresponding ata-clipboard-text content.

<button class="btn" data-clipboard-text="Text to be copied" aria-label="Copy Success">Copy</button> 

javascript
The following sentence is added to the code before and save it to open a browser, click on the Copy button.

new Clipboard('.btn'); 

Of course, we can do further processing, such as when the copy is complete, copy the success prompted some information more friendly, just run the following code:

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