JQuery Copy To Clipboard

Posted By : Rama shankar | 11-Aug-2016

jquery

JQuery Copy To Clipboard

Without using CTRL+C , jquery provides some plugins to copy to clipboard automatically,
like by pressing any button , you can copy some predefined contents to your system’s clipboard.

We are using Zero Clipboard plugin for this purpose (copy to clipboard)
Zero Clipboard use flash for copy the content to clipboard, so its very important that client machine must have flash installed.

Requirements:

To use zero copy to clipboard you need two files
1 . ZeroClipboard.js
2 .ZeroClipboard.swf
both file can be download from here

<html>
<head>
<script src =”../ZeroClipboard.js”></script>
<script >
// configure ZeroClipboard first
ZeroClipboard.config( { moviePath : /path/swffile/ZeroClipboard.swf } );

// initialize constructor
var client = new ZeroClipboard($(“#elementid”));

/* elementid is the element on which click , the data will copy to clipboard. you can also pass multiple elements, it use jquery selector */
</script>
<body>
<input type=”text” id =”targetid”></button>
<button id =”elementid” data-clipboard-text ='data for copy’ >copy</button>
</body>
</head>
<html>

ZeroClipboard automatically copy the value of data-clipboard-text attribute when event accur on element pass to ZeroClipboard's constructor

in place of data-clipboard-text to data-clipboard-target = targetid
ZeroClipboard automatically copy the value of data-clipboard-text attribute

ZeroClipboard provides some events to make copy interactive like
lient.on("mouseover",function_mouseover)
client.on(copy",function_onCopy)
client.on("complete",function_onCopyCompleate)

Thanks for reading.