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
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • 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...

Incredible Demos

  • By
    Shake Things Up Using jQuery UI&#8217;s Shake Effect

    Yesterday I created a tutorial showing you how you can shake an element using Fx.Shake, a MooTools component written by Aaron Newton. It turns out that jQuery UI also has a shake effect which can draw attention to an element. The XHTML Exactly the same as...

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

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!