Copy To Clipboard Using Jquery Plugin With Examples

In this tutorial we are going to learn about Copy To Clipboard functionality. Nowadays most of websites are using this functionality to make the copy and paste operation easier. Good part is that most of browser supported by clipboardjs plugin.

Supported browsers: Chrome, Firefox, Edge, Safari, IE11.

Steps required to use Clipboardjs Plugin :

1. Include jQuery library.
2. Include Clipboardjs Plugin to perform copy and paste operation.

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

3. Use the below line of code to perform clipboard operation, when user click on button.

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

Also you can use the Clipboardjs Event, that helps to fire custom events such as success and error for you to listen and implement your custom logic.

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);
});

Lets see the complete example one by one and this helps to build more understanding on clipboard functionalities.

Example :1 

Copy Input field value to Clipboard

In this example we are copying 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>

Output:

Example :2 

Copy Textarea field value to Clipboard 

In this example we are copying 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>

Output:

Example :3 

Copy Div field value to Clipboard 

In this example we are copying 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>

Output:


This is all about Copy To Clipboard functionality. Let me know your comments in case of any queries.

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Copy%20To%20Clipboard%20Using%20Jquery