Sometimes we may want to implement "Copy to Clipboard" feature in our web page, so visitors can easily copy text from part of a web page. This is a fascinating thing to be done with JavaScript.
There is window.clipboardData object that allows copy to system clipboard and access to the data placed on the system clipboard, but this object is only supported by Internet Explorer.
Fortunately, there is a solution for other browsers is to use a well-developed JavaScript library for this purpose, ZeroClipboard. The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.
Update 03/01/2016: Modern browsers now support copy to clipboard natively through the document.execCommand()
method, calling the method with 'copy' command will copy the current selection to the clipboard. Read more here.
Demo
Source Code
<style> #exampleTextarea { display: block; width: 99%; } .span-message { display: none; } </style> <p> <label for="exampleInput">Copy text inside input to clipboard</label><br> <input type="text" id="exampleInput"> <button type="button" class="btn-copy">Copy to Clipboard</button> <span class="span-message">Copied!</span> </p> <p> <label for="exampleTextarea">Copy text inside textarea to clipboard</label> <textarea id="exampleTextarea" rows="4"></textarea> <button type="button" class="btn-copy">Copy to Clipboard</button> <span class="span-message">Copied!</span> </p> <script> // Function for initializing ZeroClipboard function zcInit() { var client = new ZeroClipboard($('.btn-copy')); client.on('ready', function(event) { client.on('copy', function(event) { // `this` === `client` // `event.target` === the element that was clicked // Get the text content of <input> or <textarea> that comes immediately before the clicked button var $prevEle = $(event.target).prev(); var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val(); // If value of `text` is not empty, set the data to clipboard if (text) { event.clipboardData.setData('text/plain', text); } }); // Show a message when the text is copied client.on('aftercopy', function(event) { if (event.data['text/plain']) { $(event.target).next().finish().fadeIn(30).fadeOut(1000); } }); }); client.on('error', function(event) { ZeroClipboard.destroy(); }); } // Function for copying text using window.clipboardData function addHandler_WinClipData() { $('.btn-copy').click(function() { var $prevEle = $(this).prev(); var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val(); // If value of `text` is not empty, set the data to clipboard if (text && window.clipboardData.setData('Text', text)) { // Show a message when the text is copied $(this).next().finish().fadeIn(30).fadeOut(1000); } }); } // Function for pop up a message and select text in <input> or <textarea>, in case window.clipboardData and Flash are not available function addHandler_AlertMsg() { $('.btn-copy').click(function() { if ($(this).prev().val()) { alert('No Flash installed. Please copy manually'); $(this).prev().focus().select(); } }); } // Function for checking Flash availability function detectFlash() { var hasFlash = false, obj, types, type; try { obj = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if (obj) { hasFlash = true; } } catch (e) { types = navigator.mimeTypes; type = 'application/x-shockwave-flash'; if (types && types[type] && types[type].enabledPlugin) { hasFlash = true; } } return hasFlash; } var hasWinClipData = !!(window.clipboardData && clipboardData.setData), hasFlash = detectFlash(); if (hasWinClipData) { // Check if window.clipboardData is available addHandler_WinClipData(); } else if (hasFlash) { // Check if Flash is available $.ajax({ type: 'GET', url: '//cdn.jsdelivr.net/zeroclipboard/2.2.0/ZeroClipboard.min.js', dataType: 'script', cache: true, success: zcInit, error: addHandler_AlertMsg }); } else { // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked addHandler_AlertMsg(); } </script>
Explanation
The script above includes both ZeroClipboard and window.clipboardData
to achieve cross-browser support. The script will first check for window.clipboardData
object support. If the browser supports the object, the object will be used for copying and no ZeroClipboard script will be downloaded. If the browser does not support the window.clipboardData
object, then it will check for Flash support. If Flash is supported, then it will download ZeroClipboard script asynchronously. Otherwise, a "click" event handler will be bound to the "copy buttons", to pop up an alert box with message when clicked.
**This example uses some jQuery syntax to simplify code.
Wow I got a working example !!!. Thank you
This was the best resource for ZeroClipboard. Thank you!