jQuery Copy to Clipboard 4 Options

This article explores four jQuery and JavaScript methods for automating clipboard copying: zClip, Zero Clipboard, a copy text workaround, and a method from a David Walsh tutorial. Each approach offers unique strengths and weaknesses, making some more suitable for specific situations.

The author recommends the copy text workaround due to its relative simplicity compared to the other plugin options.

It's crucial to note that clipboard copying is achievable without jQuery, using pure JavaScript. However, browser compatibility can be an issue, as document.execCommand('copy') lacks universal support. Alternatives like the Clipboard.js library or the Clipboard API provide better cross-browser compatibility.

My experiment today involved using jQuery (and plain JavaScript) to automate clipboard copying—a task easily accomplished via right-click > copy or Ctrl C. Generally, the execCommand('copy') method handles this, but it appears to work only in Internet Explorer. A workaround involves using a Flash SWF file. Several jQuery plugins exist, and I've identified four options:

1. zClip: This plugin functions solely with hyperlinks. Its core functionality (for IE only) is shown below:

function copy(str) {
    //for IE ONLY!
    window.clipboardData.setData('Text', str);
}

2. Zero Clipboard: A robust clipboard plugin (download link omitted for brevity). A snippet of its usage:

function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor(true);
    clip.addEventListener('load', my_load);
    clip.addEventListener('mouseOver', my_mouse_over);
    clip.addEventListener('complete', my_complete);
    clip.glue('d_clip_button');
}

3. Copy Text Workaround: This method offers a simpler approach.

jQuery Code:

$(document).ready(function(){
    $('li').live('click', function(){
        var path = $('#pathtonode').html();
        path = path.replace(/ > /g,".");
        addtoppath(path);
    });
    $('#toppathwrap').hide();

    function addtoppath(path) {
        $('#copypath').val(path);
        $('#toppathwrap').show();
        $('#copypath').focus();
        $('#copypath').select();
    }   
});

$('#copypath', 'body')
    .find('a')
        .livequery('click', function() {
            $(this).blur();
            var nodetext = $('#id-of-element-to-copy').html();
            $('#copypath input').focus();
            $('#copypath input').select();
            return false;
        });

HTML Code:

<div id="toppathwrap">
    <input type="text" id="copypath">
</div>

CSS Code:

#toppathwrap { position:fixed; top:0px; right:0px; background-color:#F2F1E8; padding:5px; display:none; }

4. David Walsh Tutorial Method: This method utilizes a JavaScript function and potentially a Flash component for broader compatibility.

function copy(inElement) {
  if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
     range.execCommand('Copy');
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed flashvars="clipboard='+escape(inElement.value)+'" height="0" src="_clipboard.swf" type="application/x-shockwave-flash" width="0"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

(Note: Source links are omitted for brevity but were present in the original input.)

The above is the detailed content of jQuery Copy to Clipboard 4 Options. For more information, please follow other related articles on the PHP Chinese website!