Please wait for 15 seconds...

Friday 11 July 2014



Today I am going to show you how to copy simple text or HTML data to clipboard using javascript step by step. It is very fancy feature, copy data with just one click and paste wherever you want. I am using here Zeroclipboard library. It uses flash SWF file. Most of the time Zeroclipboard's newer version do not support previous version so I highly recommend you to stick with a version of zeroclipboard and use it regularly. I am using here v2.1.1 which is latest right now.

Copy to Clipboard Using Javascript


I have divided this tutorial in three parts, Kickstart, Customise, Apply to Multiple so there will be no problem to go from toe to top.

Kickstart

First copy this library folder and save in your computer. Create an HTML file and name it copy_to_clipboard.html. Now copy n paste below code in it.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Copy Text to Clipboard Using Javascript Day 1</title>
</head>
<body>
<div class="main">
<div>
<div data-clipboard-text="This is copied text content" id="copy_me" class="copy_me">Click me</div>
<div class="breaker"></div>
</div>
<div>
<textarea class="text_container" placeholder="Paste here..."></textarea>
</div>
</div>
</body>
</html>

CSS

<style type="text/css">
.main{
width:600px;
position:absolute;
left:50%;
margin-left:-300px;
top:20%;
}
.copy_me{
border:2px black dashed;
padding:5px 10px 5px 10px;
float:left;
cursor:pointer;
margin-right:3px;
margin-bottom:3px;
}
.breaker{
clear:both;
}
.text_container{
padding:10px;
font-size:15pt;
border:2px red solid;
margin-top:15px;
width:500px;
height:150px;
}
</style>

Now include library files and initialising codes. I assume here that you have some prior knowledge of jQuery. If you are totally new in jQuery then go to this link and do some practice.

Javascript

<script type="text/javascript" src="js/jquery.min1.11.1.js"></script>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var client = new ZeroClipboard(document.getElementById('copy_me'));

client.on("aftercopy", function(e) {
alert('Copied to clipboard');
});
});
</script>

Open copy_to_clipboard.html in your browser and click on “Click me” button. Text has been copied in your clipboard now paste it in big text box.

This is for day one. In the next tutorial I will explain how to Customise and Apply to Multiple targets.

Next Tutorial: 

Posted by Atul

0 comments:

Post a Comment

Techsirius on Facebook