Copy To Clipboard Button - Simple javascript

Many times when you visit a coding website, it has a button on it, which says "copy to clipboard".

Today, we'll be learning how to implement that on your own website.
So, here's how the magic is done!

Clipboard.js is a simple javascript which can be used to achieve our goal.

Why to use clipboard.js?

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
That's why clipboard.js exists.

- as said on their website.

So, lets get straight into how we can implement it on our website.

STEP 1) INSTALLATION

DOWNLOAD THIS ZIP FILE: click here.
Then, extract it and copy the dist folder into your project. Then in the <head> section write the following to link the js to your page.

OR you can load it from a third-party CDN provider.

STEP 2) IMPLEMENTATION

Then create an input/textarea which you want the user to copy. give it a specific id. ( in this case, we've given the id as id="foo").

Next, create a button and give it a class (for ex 'btn') add the attribute data-clipboard-action and data-clipboard-target in the button as follows.

NOTE: you can also use data-clipboard-action="cut" instead of data-clipboard-action="copy"

Then implement the script which instantiate the clipboard object by passing a DOM selector, HTML element, or list of HTML elements.
that is in simple words, create a javascript code which will create an object of type clipboard and take an argument of html element(s).
Then on success, do something if you want to (here, we're logging our success or failure on the console).

<script>
	var clipboard = new Clipboard('.btn');

	clipboard.on('success', function(e) {
	console.log(e);
	});

	clipboard.on('error', function(e) {
	console.log(e);
	});
</script>

and we're done. when you click the button, the above javascript is called and the data in the input is copied to your clipboard.

DEMO

FULL DEMO CODE

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>target-input</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<!-- 1. Define some markup -->
	<input id="foo" type="text" value="hello">
	<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

	<!-- 2. Include library -->
	<script src="dist/clipboard.min.js"></script>

	<!-- 3. Instantiate clipboard -->
	<script>
	var clipboard = new Clipboard('.btn');

	clipboard.on('success', function(e) {
	console.log(e);
	});

	clipboard.on('error', function(e) {
	console.log(e);
	});
	</script>
	</body>
	</html>

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Hope you learned something new!
Please tell me if you have any problem while implementing it - in the comments down below!

Do subscribe to this blog for more such cool things!
Do share this post if you like it.

Coding and Decoding

Search This Blog