When working on front-end side, we always want User experience very smooth and easy. Like working on form elements, you may want to provide user copy text from input, textarea element with just copy button. This can be done with little Javascript code, or you may want to use clipboard.js
clipboard.js is simple, independent, lightweight and easy to use Javascript library by which you can copy text from input, textarea elements or from any html element.
Installation
You can get clipboard.js by NPM command
npm install clipboard --save
Or you can simply download zip file from Github repo.
Or even if you don't want to download, you can simply load from any CDN providers.
Include Javascript
First, include the script located on the dist folder or load from any third-party CDN provider.
<script src="dist/clipboard.min.js"></script>
// or include CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
Now initial it with below code, pass the Dom selector when initialise:
<script type="text/javascript">
var Clipboard = new ClipboardJS('.btn');
</script>
Now add the HTML elements that you want to copy.
<input id="input-txt" value="clipboard.js is awasome">
<button class="btn" data-clipboard-target="#input-txt">Copy</button>
Add data-clipboard-target directive to button element and value to be id of input which you want to copy. Sameway you can also cut the text by adding data-clipboard-action="cut"
<input id="input-txt" value="clipboard.js is awasome">
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#input-txt">Cut</button>
Same way it can be added to textarea also.
<textarea id="txtarea">clipboard.js is simple.</textarea>
<button class="btn" data-clipboard-target="#txtarea">Copy</button>
If you want to copy text from any element, just add data-clipboard-text directive.
<button class="btn" data-clipboard-text="clipboard.js lightweight.">Copy me</button>
Here is full HTML code.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<textarea id="txtarea" >clipboard.js is awasome</textarea>
<div class="validate">
<button type="button" class="btn" data-clipboard-target="#txtarea">Copy</button>
</div>
</form>
<button class="btn" data-clipboard-text="clipboard.js is simple">Copy me</button>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script type="text/javascript">
var Clipboard = new ClipboardJS('.btn');
</script>
</body>
</html>
Sometimes you may want to perform any action when user do copy or cut event. In these cases, clipboard.js fire success or error events for you to perform any event.
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
If you are working with single page application, you may distroy any clipboard.js object with destroy() method.
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
Conclusion
In this article, you learned to add and use clipboard.js. Now you can also add it to your real workfield.
