Copy to Clipboard Cross-Browser Using ZeroClipboard and window.clipboardData

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: 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.