MooTools Clipboard Plugin

By  on  

The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse. Here's how to use the MooTools Clipboard plugin enhanced by a "messenger" DIV that pops in when content has been copied.

The CSS

.messenger	{ width:150px; text-align:center; padding:5px 8px; font-weight:bold; position:absolute; right:2%; top:2%; font:12px arial; }

You can make the messenger look however you'd like. The messenger isn't core to the plugin, so this CSS may not be needed.

The MooTools JavaScript

var ClipBoard = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		swfLocation: 'copy.swf',
		clipboardID: 'flashcopier'
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//add the copier to the page
		this.createCopier();
	},
	
	//put it in the page
	createCopier: function() {
		if(!$(this.options.clipboardID)) {
			new Element('div',{
				id: this.options.clipboardID
			}).inject(document.body);
		}
	},
	
	//a method that does whatever you want
	save: function(text) {
		if (window.clipboardData)
		{
			window.clipboardData.setData('Text',text);
		}
		else
		{
			$(this.options.clipboardID).set('html','');
		}
	}
});

The small plugin accepts two parameters: swfLocation, which is the path to the needed "copy.swf" file and clipboardID, the ID of the injected clipboard element.

The MooTools Usage

//do it!
window.addEvent('domready',function() {
	
	//messenger
	var messenger = new Element('div',{ 'opacity':0, 'class':'messenger' }).inject(document.body,'top');
	var myMorph = new Fx.Morph(messenger,{'duration':700,'link':'chain'});
	
	var clipboard = new ClipBoard();
	$$('textarea').addEvent('focus',function() {
		//save to clipboard and select
		clipboard.save(this.value);
		this.select();
		
		//pop in the notifier, then hide it
		messenger.set('text','The text has been copied!');
		myMorph.start({'opacity':1,'background-color':'#90ee90'});
		var jj = function() { myMorph.start({'opacity':0,'background-color':'#90ee90'}); };
		jj.delay(1000)
	});
});

For every textarea on the page, I copy the contained text when the element receives focus. You'll also see my messenger code which isn't core to the plugin.

The Mysterious copy.swf File

When I first found the file, I couldn't help but wonder what Actionscript code was needed to achieve the OS copy functionality. Turns out all you need is the following Actionscript at the first slide of the SWF:

if (clipboard.length)
{
	System.setClipboard(clipboard);
} // end if

If you want to use it on your own site, download the plugin and download the copy.swf file.

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...

Discussion

  1. The code is nice… but the flash doesn’t work with flash player v10.

  2. Also note that there is another Mootools Clipboard plugin by Aaron Newton: http://www.clientcide.com/wiki/cnet-libraries/09-forms/00-clipboard

  3. Rikki

    Yeah, unfortunately solutions like this don’t work with FP10 due to new security restrictions. Basically Flash will only let you copy to the clipboard or upload files if the action is initiated within the Flash file itself, by the user. Flash uploaders have implemented various solutions to the problem, but I don’t know if there are any for the clipboard scripts yet.

  4. Argh! I already had this in place on an internal website. It was working great until our users upgraded to Flash 10.

    When I saw your post David, I was all excited that you’d found a great work around. Alas, it was not the case.

    Does ANYONE know how to make this work with Flash 10?

  5. Michael Langham

    @Ronnie @Rikki: thanks for that explanation. Prolly why I’d been having difficulties at Chris’s ipsum page.

    great idea though.

  6. http://letmegooglethatforyou.com/?q=flash+10+copy+to+clipboard

    The fix is manual – on a client browser basis, so it’s not ready for prime time yet.

  7. Alex

    Retailmenot swf script is doing fine job with the clipboard, even with my v10 flash player!

    http://ui.cdn.retailmenot.com/interface/im/clicktocopy_v1.swf

  8. Alex

    Retailmenot swf script works perfect even with the v10 flash player, how can ???
    http://ui.cdn.retailmenot.com/interface/im/clicktocopy_v1.swf

  9. Alex

    Retailmenot swf script works perfect even with the v10 flash player, how can ???

  10. I’ll try to decompile their SWF and see how they’re doing it.

  11. http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html

    Don’t know if this assists:
    Clipboard: The ActionScript 2.0 and ActionScript 3.0 API called System.setClipboard(), available in Flash Player 9 and earlier, now requires user interaction to write to the system Clipboard. In addition, the new Clipboard.generalClipboard object in Flash Player 10 can read and write the system Clipboard…

  12. For some reason, this script doesn’t work on FF3 anymore.

  13. Hey guys, here is a free JavaScript / Flash 10 library that provides copy-to-clipboard functionality. Works in all major browsers:

    http://code.google.com/p/zeroclipboard/

    Enjoy!

  14. @Joseph – Thank you so much for this. I’ll be able to get everyone off my back at work now.

  15. Sweet post, David! Love the MooTools 1.2 integration, btw. Would love to see a mash up with ZeroClipboard (thx Joseph)…perhaps a tooltip w/ the copy button (embedded SWF) tacked near the user’s mouse coords or upper-right hand like your messenger element. ;)

  16. For some reason, FF screws up here, even 31. beta 3 doesn’t copy.

    Thanks Joseph, I’ll try out that library

  17. I ported the JQuery ZeroClipboard plugin to Mootools – can be improved and is on github ;-)

    http://github.com/peterpunk/MooZeroClipboard/tree/master

    P

  18. Danielle

    I found another copy to clipboard script that works with Flash 10:

    http://www.revivedwire.com/misc/scripts/Copy_to_Clipboard_with_Flash_10.php

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!