jQuery Copy to Clipboard 4 Options

Key Takeaways

• There are four methods to automate the process of copying to clipboard using jQuery and JavaScript: zClip, Zero Clipboard, Copy Text Workaround, and the David Walsh Tutorial. Each method has unique characteristics and may work better in certain situations.
• The author suggests using the Copy Text Workaround method as it can be less complicated to get working compared to the other plugins.
• It’s important to note that copying to clipboard can be done without jQuery, using pure JavaScript. However, compatibility issues may arise as not all browsers support the document.execCommand(‘copy’) method. Alternatives like Clipboard.js library or the Clipboard API can be used for better compatibility.

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 && 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"/>';
			document.getElementById(flashcopier).innerHTML = divinfo;
		  }
		}

Source

Frequently Asked Questions (FAQs) about jQuery Copy to Clipboard