In the web world, it's all about great user experience. Many times we need to use the data to copy paste from one place to another. For instance, if you are providing the CDN or any other data on your web pages that need to be copied, it will be great to use click to copy functionality as it allows users to select and copy the target data in a single click event.

There is a dedicate jQuery library clipbaord.js that can be used as well. Keep reading to learn how to use clipboard.js to copy data to the clipboard.

We will cover two different methods to do this.

And first of all, We will learn to create our very own click to copy functionality with jQuery.

Let's see how do we do it.

Method 1

Step - 1

Create the HTML markup as below -

We have used readonly attribute in the input field. In the value attribute goes the data which will be copied on click event.

<div class='copied'></div>

<div class="copy-to-clipboard">
	<input readonly type="text" value="Click Me To Copy">
</div>

 A little bit CSS for beautification -

.copy-to-clipboard input {
	border: none;
	background: transparent;
}

.copied {
	position: absolute;
	background: #1266ae;
	color: #fff;
	font-weight: bold;
	z-index: 99;
	width: 100%;
	top: 0;
	text-align: center;
	padding: 15px;
	display: none;
	font-size: 18px;
}

 

Step - 2

First, we trigger the click event on the targeted data element and run the select() function. Then simply we run document.execCommand() function which copies the data.

$(function() {
	$('.copy-to-clipboard input').click(function() {
	$(this).focus();
	$(this).select();
	document.execCommand('copy');
	$(".copied").text("Copied to clipboard").show().fadeOut(1200);
    });
});

The very last line of the script simply alert the event action and put the message 'Copied to clipboard' in the first line of the HTML markup with fading animation effect.

Very Neat. Check out the JSFiddle demo link in the sidebar.

 

Method 2

Copy text to clipboard with clipboard.js

Clipboard.js is a dedicated JavaScript library to cut or copy the data to clipboard and is very easy to implement.

Let's get started.

Download and install clipboard.js and add it to document before closing body tag. Alternatively, we can also use the third-party CDN library.

jsDelivr
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

 

Now create the HTML markup - 

We add input field with ID and value attribute. And a button input with data-clipboard-target attribute. We target the value int the input field with the ID.

<input id="copy-me" value="master://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#copy-me">
    <img src="images/copy-icon.png" alt="Copy to clipboard">
</button>

 

Finally, initialize the clipboard.js 

$(function(){
    new Clipboard('.btn');
)};

That is all we needed to do and its copying the data when the button is clicked.

But we can do more.

We may need to cut the data instead of copy it to the clipboard.

With clipboard.js, we can do it by using data-clipboard-action attribute. By default, copy is the default action.

Let's have a quick example - 

<!-- Target -->
<textarea id="data-box">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Vestibulum bibendum pellentesque 
orci libero porta sit amet.</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#data-box">
    Cut to clipboard
</button>

 

That is all. We can also drop the textarea or the input fields and use data-clipboard-text attribute to do the same operations.

<button class="btn" data-clipboard-text="It is a mistake to think you
can solve any major problems just with potatoes.- Douglas Adams
">Copy quote</button>

Very quick!

So we can easily do cut or copy operation with the clipboard.js. For more advanced uses and configurations visit the clipboard.js. 

#Code Snippets #jQuery