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
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • By
    Scrolling “Go To Top” Link Using Dojo

    One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go...

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!