Skip to main content

jQuery Copy to Clipboard 4 Options

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

Source

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Integromat Tower Ad