How to copy text to Clipboard using jQuery
In this tutorial I am going to show you how to copy text in clipboard without ctrl+c and ctrl+v I have used jQuery Clipboard plugin (zclip) to perform this task. The JavaScript clipboard functionality is disabled by the most of the browser due to security risk so this plugin use a dynamic flash file.
Usage
It’s very simple and short code to understand and easy to integrate:
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script src="jquery.zclip.js"></script>
jQuery library and zclip library include to handle copy procedure.
jQuery
jQuery to trigger library:
$(document).ready(function(){
$("a#copy-link").zclip({
path:"ZeroClipboard.swf",
copy:function(){return $("input#copy-box").val();}
});
});Here is the main logic we used a swf file which use flash action script to copy text because modern browsers disabled copy to clipboard so we used flash file for reference script used to create flash action script available here.
HTML text box and link:
<input type="text" id="copy-box" value="PHPGang demo is available!!" /> <a href="#copy" id="copy-link">Copy Now</a>
All together
Here we create complete procedure with jQuery, CSS and HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to copy text to Clipboard using jQuery | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style>
#dynamic {
font-size: 15px;
height: 28px;
width: 357px;
}
</style>
<script>
$(document).ready(function(){
$("a#copy-dynamic").zclip({
path:"ZeroClipboard.swf",
copy:function(){return $("input#dynamic").val();}
});
});
</script>
</head>
<body>
<h2>How to copy text to Clipboard using jQuery Example. => <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<input type="text" id="dynamic" value="PHPGang demo is available!!" />
<a href="#copy" id="copy-dynamic">Copy Now</a>
</body>
</html>I hope it helps you guys please give your feedback in comments.
Tutorial Categories:
But how do we attach the swf object for dynamically created elements ???
You don’t need to attach swf file just give its path in jQuery like this it will work itself path:”ZeroClipboard.swf”,.
Many thanks for your article
I monetized some functional
I can’t copy text to clipboard, I don’t know why?
Please help me.
I have already copy above tutorial code and link jquery.zclip.js and ZeroClipboard.swf.
Is there any possibility that the text is copied without pressing the button.
Thank very much the code above is great.
where is the flash plugin.I unable to download it
Does support Opera browser?
p.s
works flawlessly, I tried it now, thank you
Its working fine great thanks…..
Demo not working with Chrome
Works fine. tk
Hi, the script what I have downloaded from this site is not working in chrome(latest)/IE10. but there were no errors in script (when I click the CopyNow link, the text is not copied to clipboard). Could you pls tell me what could be the reason.
Hi, it not working Mozilla firefox. I think flash plugin problem. how to resolve it ?
if i need to integrate on multiple buttons then???and that button are generated with ajax call..so how can i implement on this.
my buttons like
Copy
Copy
Copy
Copy
Copy