Clipboard Copy
In the past I’ve wondered if it was possible to make a cross-browser (JavaScript) script that a webpage could execute to copy some text to the windows clipboard. Would be handy and would save the user from pulling the whole CTRL+C trick out.
It was pretty easy to do with Internet Explorer with the code below… but we all don’t use IE.
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
Credit to Mark O’Sullivan of http://lussumo.com/ since he has a solution for this problem. In his file browser / photo gallery application, there is a link to copy the URL of the file to the clipboard… works in both Firefox and IE (I also checked in Opera 8.5 and it didn’t seem to work).
Here is the solution implemented in a javascript function:
Update: I have updated the copy() function in the script to use encodeURIComponent() instead of escape() which will allow use of ‘+’ to be copied as well.
function copy(inElement) {
if (inElement.createTextRange) {
var range = inElement.createTextRange();
if (range && BodyLoaded==1)
range.execCommand('Copy');
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
}
Pretty slick I’d say, he’s using a Macromedia Flash file to perform the copy on the Browser’s behalf (since Firefox/Netscape’s security settings do not allow access to the clipboard by default).
I’ve uploaded the SWF file that you can use in your own webpage.
This software is licensed under the GPL so you can take this solution, change it, whatever, free.
February 28th, 2010 at 4:05pm
thanks again for sharing your knowledge!
March 24th, 2010 at 11:14am
tweet meme has you on their hot list for today ;D
April 18th, 2010 at 4:39pm
[...] Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 [...]
May 19th, 2010 at 11:16am
This is not working please send me the code or process by which i can enable my mozilla clipbord
June 24th, 2010 at 3:23am
@Nilesh,
http://www.rodsdot.com/javascript/cross_browser_clipboard_copy_with_pop_over_message.asp
Works for me on Safari 4+ as well as Opera, Firefox, IE, Google Chrome, etc. etc.
The user does need Flash installed but Adobe reports the vast majority of browsers do have Flash installed, comparable to the number of browsers with JavaScript enabled.
Assuming Safari is Flash enabled that solution should work and is still not broken by any recent browser or Flash updates.
June 30th, 2010 at 6:32am
Is there any code or process to enable mozila clipboard?
July 10th, 2010 at 8:55pm
cool, thanks
August 16th, 2010 at 3:06am
[...] Keyings has a good example of how to do this, and links to the open source flash object (_clipboard.swf) by [...]
August 25th, 2010 at 12:47pm
[...] web开发中常常要实现“复制到剪切板”功能。这个功能很实用,但是由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限了。Firefox 默认下不能直接通过Javascript操作剪切板,必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现,普遍流传的办法是_clipboard.swf,这是国外最早实现的(著名的Clipboard Copy解决方案: http://www.jeffothy.com/weblog/clipboard-copy/)。但是很可惜,_clipboard.swf在新出来的flash10中无效,因为flash10中规定了只有在swf上进行了实际的操作(比如鼠标点击)才能启动剪切板。而_clipboard.swf方法的swf是隐藏的,通过JavaScript来操作flash的剪切板,显然没有对swf进行实际的用户操作。 [...]
September 4th, 2010 at 6:44pm
This no longer works in Flash 10.
I used this free library to get it working:
http://code.google.com/p/zeroclipboard/
It pretty much works the same but follows Flash’s new rules.
Copying has to occur now due to a user action such as clicking.
This library takes care of it.
September 13th, 2010 at 11:55am
[...] Firefox 默认下不能直接通过Javascript操作剪切板,必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现,普遍流传的办法是_clipboard.swf,这是国外最早实现的(著名的Clipboard Copy解决方案: http://www.jeffothy.com/weblog/clipboard-copy/)。但是很可惜,_clipboard.swf在新出来的flash10中无效,因为flash10中规定了只有在swf上进行了实际的操作(比如鼠标点击)才能启动剪切板。而_clipboard.swf方法的swf是隐藏的,通过JavaScript来操作flash的剪切板,显然没有对swf进行实际的用户操作。 [...]
December 13th, 2010 at 9:24pm
i have juste tested it, but it dont work on firefox with last flash version.
December 15th, 2010 at 12:49am
Very cool. Exactly what I was looking for.
March 7th, 2011 at 12:05pm
Quote from http://cfruss.blogspot.com/2009/01/copy-to-clipboard-swf-button-cross.html:
“Since Flash 10, there have been security enhancements that prevent data being copied to the clipboard without an event being initiated by the user.”
You can find more information here: http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html
March 24th, 2011 at 1:27am
This is not working please send me the code or process by which i can enable my mozilla clipbord