Use Javascript to Copy and Paste from the Clipboard

Demonstration

Some Text.

Description

A less used feature of JavaScript is to interact with the clipboard of the client computer. This page is intended to provide a demonstration of how to use JavaScript to copy and paste from the clipboard.

Browser Issues

Internet Explorer

If Internet Explorer is used as the client browser then you should be be prompted with this message when you first try to copy or paste.

Once you allow access once on that particular page, then you should not be prompted during any subsequent copiers or pastes during that session.

Firefox

With firefox things are slightly more tricky as you need to install the AllowClipboard Helper extension. Once installed you need to add in the domain from which access will be allowed by going to the Tools menu and selecting AllowClipboard Helper.

Open about:config and ensure the value of signed.applets.codebase_principal_support is set to true

Update 25/09/2009 : Firefox 3.X does not appear to allow any access (http://support.mozilla.com/en-US/kb/Granting+JavaScript+access+to+the+clipboard). Any feedback/news on this is appreciated.

 

Further Uses and Ideas:

• none at the moment

How it Works:

The guts of what is used on this page...

<form name="copypasteform" id="copypasteform">
<textarea rows="10" cols="50" name="ta1" id="ta1">
</textarea>
<p>
<input onclick="pasteit('copypasteform.ta1');" type="button" value="Paste" class="custombutton">
<input onclick="copyToClipboard(document.getElementById('ta1').value);" type="button" value="Copy" class="custombutton">
<input onclick="document.getElementById('ta1').value='';" type="button" value="Clear" class="custombutton">
</p>
</form> <script type="text/javascript"> function pasteit(theField) {
var val=eval("document."+theField);
val.focus();
val.select();
therange=val.createTextRange();
therange.execCommand("Paste");
} function copyToClipboard(s)
{
if( window.clipboardData && clipboardData.setData )
{
clipboardData.setData("Text", s);
}
else
{
// This is importent but it's not noted anywhere
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

// create interface to the clipboard
var clip = Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;

// create a transferable
var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;

// specify the data we wish to handle. Plaintext in this case.
trans.addDataFlavor('text/unicode');

// To get the data from the transferable we need two new objects
var str = new Object();
var len = new Object();

var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString);

var copytext=meintext;

str.data=copytext;

trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]);

var clipid=Components.interfaces.nsIClipboard;

if (!clip) return false;

clip.setData(trans,null,clipid.kGlobalClipboard);

}
} ></script>

Relevant Links

Firefox Support - Granting JavaScript access to the clipboard

clipboardData Object (MSDN)

Version History

Version 1 (25/03/08)

Previous Comments For This Page