jQuery Copy to Clipboard 4 Options

jquery-clipboard-copy

OK, so today i tried to use jQuery (and plain JavaScript) to automate the process of copying to clipboard which you all know can be easily done by right click > copy or by pressing CTRL+C. How copying to clipboard generally works is that you can simply call an exec copy command to get the current selection to the clipboard. However, it seems the only browser that supports this is IE. Now, we have a workaround to use a Flash SWF file to run and get the selection to the clipboard this way. There are jQuery plugins you can use and as I see it you have the following four options.

Note: My advice would be to use 3. The copy text workaround as it can be painful to try and get the other plugins working.


1. zClip

zClip only works on hyperlinks.

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

Source


2. Zero Clipboard

A pretty nifty clipboard plugin: Download Page.

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' );
}

Source


3. Copy Text Workaround

JQUERY CODE

$(document).ready(function(){
    //store nodepath value to clipboard (copy to top of page)
    $('li').live('click', function(){
        //console.log($('#pathtonode').html()+ " copied to window");
        var path = $('#pathtonode').html();
        path = path.replace(/ > /g,".");
        //console.log(path);
        addtoppath(path);
    });
    //initially hide copy window
    $('#toppathwrap').hide();

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

And for dynamic DOM elements:

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

HTML CODE

<div id="toppathwrap">
    <textarea id="copypath"></textarea>
</div>

CSS CODE

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

Source


4. David Walsh Tutorial

        //javascript copy function
        function copy(inElement) {
          if (inElement.createTextRange) {
            var range = inElement.createTextRange();
            if (range &amp;&amp; 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 src="_clipboard.swf" FlashVars="clipboard='+escape(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
            document.getElementById(flashcopier).innerHTML = divinfo;
          }
        }

Source

AUTHOR: . Find out more about jQuery4u author on Plus.