jQuery Copy to Clipboard 4 Options

Share this article

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 = '<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

How can I use jQuery to copy text to the clipboard?

To use jQuery to copy text to the clipboard, you first need to include the jQuery library in your HTML file. After that, you can use the .click() method to trigger a function when a button is clicked. Inside this function, you can use the document.execCommand('copy') method to copy the text to the clipboard. Remember to first select the text you want to copy using the .select() method.

Why is my jQuery copy to clipboard not working?

There could be several reasons why your jQuery copy to clipboard is not working. One common issue is not including the jQuery library in your HTML file or not loading it before your script. Another issue could be browser compatibility. The document.execCommand('copy') method is not supported in all browsers. You might want to consider using a library like Clipboard.js for better compatibility.

Can I copy to clipboard without using jQuery?

Yes, you can copy to clipboard without using jQuery. You can use pure JavaScript to achieve this. The document.execCommand('copy') method can be used in a similar way as in jQuery. However, this method is deprecated and not supported in all browsers. A more modern approach is to use the Clipboard API, but this is also not supported in all browsers.

How can I copy to clipboard using Clipboard.js?

Clipboard.js is a library that provides a simple and easy way to copy text to the clipboard. To use it, you first need to include the Clipboard.js library in your HTML file. After that, you can create a new ClipboardJS object and pass the selector of the button you want to trigger the copy action. The text to be copied can be specified using the data-clipboard-text attribute.

Can I copy HTML content to the clipboard?

Yes, you can copy HTML content to the clipboard. However, when you paste the content, it will be pasted as plain text, not as HTML. This is because the clipboard does not support HTML format. If you want to paste the content as HTML, you need to use a rich text editor that supports HTML format.

How can I copy to clipboard on button click?

To copy to clipboard on button click, you can use the .click() method in jQuery or the onclick attribute in HTML to trigger a function when the button is clicked. Inside this function, you can use the document.execCommand('copy') method to copy the text to the clipboard. Remember to first select the text you want to copy using the .select() method.

Can I copy to clipboard on page load?

Copying to clipboard on page load is not recommended because it can be annoying to the user and can be considered as a bad practice. However, if you really need to do this, you can trigger the copy function inside the $(document).ready() function in jQuery or the window.onload event in JavaScript.

How can I show a tooltip when text is copied to clipboard?

To show a tooltip when text is copied to clipboard, you can use the .tooltip() method in jQuery UI. You can show the tooltip inside the function that is triggered when the copy button is clicked. After the text is copied to the clipboard, you can use the .tooltip('open') method to show the tooltip.

Can I copy to clipboard without a button?

Yes, you can copy to clipboard without a button. You can trigger the copy function on any event, like a link click, a form submit, or even a mouseover. However, keep in mind that copying to clipboard without user interaction can be considered as a bad practice and can be blocked by some browsers.

How can I copy multiple lines of text to clipboard?

To copy multiple lines of text to clipboard, you can simply include the newline character (\n) in the text string. When the text is pasted, it will be pasted with line breaks. However, keep in mind that the newline character might not work in all browsers or operating systems.

Sam DeeringSam Deering
View Author

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.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form