Steps required to use Clipboardjs Plugin :

<script src = "https://clipboardjs.com/dist/clipboard.min.js" ></script>

<input id = "example1" value = "http://www.skptricks.com/p/php.html" > <button class = "btn" data-clipboard-target = "#example1" > Copy to clipboard </button>

var clipboard = new Clipboard ( '.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 ); });

Example :1

Copy Input field value to Clipboard

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script> <script src = "https://clipboardjs.com/dist/clipboard.min.js" ></script> <style> input { padding : 10px ; border : #a5d2ca 1px solid; border - radius : 4px ; background - color : #FFF; width : 230px ; margin - top : 5px ; box - sizing : border - box ; } button { background - color : rgb ( 255 , 87 , 51 ); padding : 10px 40px ; color : #FFF; border : #739690 1px solid; border - radius : 4px ; cursor : pointer ; } #container{ display : block ; width : 500px ; height : 180px ; margin - bottom : 12px ; padding : 15px ; border : 2px dotted orange ; } . copied { position : absolute ; left : 723px ; width : 100px ; height : 40px ; text - align : center ; line - height : 40px ; background :# 4C7D4C ; border - radius : 5px ; color : white ; display : none ; } </style> <script> $ ( document ). ready ( function () { console . log ( "ready!" ); new Clipboard ( '.btn' ); $ ( "button" ). on ( "click" , function (){ $ ( '.copied' ). show (); $ ( '.copied' ). fadeOut ( 2000 ); }); }); </script> <div class = "copied" > Copied!!! </div> <div id = "container" > <h1> 1. Copy text from the Input field </h1> <input id = "example1" value = "http://www.skptricks.com/p/php.html" > <button class = "btn" data-clipboard-target = "#example1" > Copy to clipboard </button> </div>

Example :2

Copy Textarea field value to Clipboard

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script> <script src = "https://clipboardjs.com/dist/clipboard.min.js" ></script> <style> input { padding : 10px ; border : #a5d2ca 1px solid; border - radius : 4px ; background - color : #FFF; width : 230px ; margin - top : 5px ; box - sizing : border - box ; } button { background - color : rgb ( 255 , 87 , 51 ); padding : 10px 40px ; color : #FFF; border : #739690 1px solid; border - radius : 4px ; cursor : pointer ; } #container{ display : block ; width : 500px ; height : 180px ; margin - bottom : 12px ; padding : 15px ; border : 2px dotted orange ; } . copied { position : absolute ; left : 723px ; width : 100px ; height : 40px ; text - align : center ; line - height : 40px ; background :# 4C7D4C ; border - radius : 5px ; color : white ; display : none ; } </style> <script> $ ( document ). ready ( function () { console . log ( "ready!" ); new Clipboard ( '.btn' ); $ ( "button" ). on ( "click" , function (){ $ ( '.copied' ). show (); $ ( '.copied' ). fadeOut ( 2000 ); }); }); </script> <div class = "copied" > Copied!!! </div> <div id = "container" > <h1> 2. Copy text from textarea field </h1> <textarea id = "example2" rows = "4" cols = "50" > Welcome to skptricks tutorial this is demo of clipboard.js library www.skptricks.com </textarea> <br> <button class = "btn" data-clipboard-target = "#example2" > Copy to clipboard </button> </div>

Example :3

Copy Div field value to Clipboard

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script> <script src = "https://clipboardjs.com/dist/clipboard.min.js" ></script> <style> input { padding : 10px ; border : #a5d2ca 1px solid; border - radius : 4px ; background - color : #FFF; width : 230px ; margin - top : 5px ; box - sizing : border - box ; } button { background - color : rgb ( 255 , 87 , 51 ); padding : 10px 40px ; color : #FFF; border : #739690 1px solid; border - radius : 4px ; cursor : pointer ; } #container{ display : block ; width : 500px ; height : 180px ; margin - bottom : 12px ; padding : 15px ; border : 2px dotted orange ; } . copied { position : absolute ; left : 723px ; width : 100px ; height : 40px ; text - align : center ; line - height : 40px ; background :# 4C7D4C ; border - radius : 5px ; color : white ; display : none ; } </style> <script> $ ( document ). ready ( function () { console . log ( "ready!" ); new Clipboard ( '.btn' ); $ ( "button" ). on ( "click" , function (){ $ ( '.copied' ). show (); $ ( '.copied' ). fadeOut ( 2000 ); }); }); </script> <div class = "copied" > Copied!!! </div> <div id = "container" > <h1> 3. Copy text from the div tag </h1> <label> Product Number : </label> <div style = " font - size : 22px ; " id = "example3" > 12743-64833-383993-646383 </div> <button class = "btn" data-clipboard-target = "#example3" > Copy to clipboard </button> </div>

In this tutorial we are going to learn aboutNowadays most of websites are using this functionality to make the copy and paste operation easier. Good part is that most of browser supported byplugin.: Chrome, Firefox, Edge, Safari, IE11.1. Include2. Includeto perform copy and paste operation.3. Use the below line of code to perform clipboard operation, when user click on button.Also you can use the Clipboardjs Event, that helps to fire custom events such asandfor you to listen and implement your custom logic.Lets see the complete example one by one and this helps to build more understanding on clipboard functionalities.In this example we are copyingvalue to clipboard.In this example we are copyingvalue to clipboard.In this example we are copyingvalue to clipboard.This is all aboutLet me know your comments in case of any queries.