The ability to copy things to clipboard is a useful feature that is widely enjoyed. Many mobile and PC applications gives this feature for better usability. In my day job I was assigned with a task of making some text in the web page copyable when the user click on a link. I thought this is something really simple and can be done very easily. After doing some research I figured out that we cannot modify clipboard using Javascript due to some security reasons. The only way to do is using flash where ever we need the copiable text. Luckily there is a library called ZeroClipboard which will make this easier. You can bind the elements you want to copy to ZeroClipboard, which will create a transparent flash movie above the text. You can now see the text and click on it to copy the content. Alternatively you can set the content to be copied too.
To use this first download the ZeroClipboard library and include the ZeroClipboard.min.js in your webpage. Here is an example of using this library.
<div id="clip_container" style="position:absolute;">
<span id="copy">Text</span>
</div>
<script src="js/ZeroClipboard.min.js" type="text/javascript"></script>
<script>
$(function(){
// give the path to flash movie file
ZeroClipboard.setMoviePath('js/ZeroClipboard.swf');
//create a ZeroClipboard client
var clip = new ZeroClipboard.Client();
// bind the mouse events to be listened to initiate copy
// you can use mouse up or something else also
clip.addEventListener('mousedown',function(client){
// Set what text you want to save in clipboard
clip.setText($("#copy").text())
})
// The flash movie will fire a complete event after saving text in clipboard
// we can do some callback functions here
clip.addEventListener('complete',function(client,text) {
alert("Copied: "+text)
});
// bind the element we need this feature. Note hat copy is the id of that DOM element
clip.glue("copy")
})
</script>