Copy Text To The Clipboard
Posted By : Monu Thakur | 28-Jun-2018
clipboard.js: Copy Text to the Clipboard
clipboard.js lets you easily copy text to the clipboard. At 3kb gzipped and no need for Flash, it's a great lightweight way to allow your visitors to copy bits of text and code on your site.
Installation
npm installation:
npm install clipboard --save
Bower installation:
bower install clipboard --save
Or get the package from Github and place the clipboard.min.js file manually in your project folder.
Then include the JavaScript file before the closing tag:
Finally, you’ll want to instantiate it. It this example we’re instantiating all elements with a class of clipboard:
$( document ).ready(function() {
var clipboard = new Clipboard('.clipboard');
});
Usage
To use it, either use the data-clipboard-text data attribute:
<button class="clipboard"
data-clipboard-text="This will be copied">
Copy this
</button>
Or use the data-clipboard-target data attribute:
<span id="copy">This text will be copied</span>
<button class="clipboard" data-clipboard-target="#copy">
Copy this
</button>
Handling errors
Handle success and error states easily with the success and error custom events:
$( document ).ready(function() {
clipboard.on('success', function(e) {
$(e.trigger).text("Copied!");
e.clearSelection();
setTimeout(function() {
$(e.trigger).text("Copy");
}, 2500);
});
clipboard.on('error', function(e) {
$(e.trigger).text("Can't in Safari");
setTimeout(function() {
$(e.trigger).text("Copy");
}, 2500);
});
});
Some browsers don’t support the execCommand API needed for clipboard.js to work properly. The text will still get selected, so a good workaround is to show a message telling the user to hit ctrl + c when an error event is triggered.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.