MooTools Clipboard Plugin

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.