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.
January 8th, 2006 @ 8:44 am
[…] 更新: 在布丁天位大長輩的指點之下，現在 FireFox 也可以複製網址了，方法很暴力(應該是 xxx 等級)，有興趣者請參考這裡 […]
January 29th, 2006 @ 6:20 am
Nice solution!
About the license, you said “this software is licensed under GPL”.
Did you mean the javascript part, flash part, or both?
November 16th, 2007 @ 9:24 am
If part of a software project is under GPL, all of it has to be. In other words, you can’t release the JS code GPL’ed and then have the required SWF component not be GPL. That would violate the GPL Liscence.
March 12th, 2006 @ 7:55 am
[…] Clipboard Copy 用 SWF 做一個 cross-browser 的 javascript copy 動作 […]
August 11th, 2006 @ 5:17 pm
Thank you thank you thank you, man, you’re great. You don’t have an idea of how much time I’ve been looking for a thing like this. Thank you really.
Regards and my best wishes from Mexico.
~Jose Jorge
August 23rd, 2006 @ 5:40 pm
Maybe I’m retarded, but can somebody tell me how I should actually call the copy() and what it is trying to copy exactly? I don’t really know javascript all that well and am confused on how to implement this.
Thanks
August 24th, 2006 @ 8:26 am
Scott:
Welcome to the world of javascript! Here’s an example of how you might implement this.
Make sure to include the js script (above) in your html first. Then you could call the copy function using a link for example.
<form name="formtocopy" action="">
<textarea name="texttocopy">
A whole bunch of text here that will be copied.
</textarea>
<br>
<a href="javascript:copy(document.formtocopy.texttocopy);">Copy the Text!</a>
</form>
You don’t HAVE to call the copy function from a link, you could call it from another javascript function if you wanted. It will copy the value from whatever html element you pass as the argument to the function.
Hope that helps you.
July 5th, 2007 @ 12:59 am
it is not working in IE, Please do something it is very urgent
November 16th, 2007 @ 9:26 am
STFI
August 24th, 2006 @ 1:43 pm
That’s a great idea. Works perfect! Just so you know though, Mozilla has an “official” way to work with the clipboard as well. It’s longer and uglier though. The URL is:
http://developer.mozilla.org/en/docs/Using_the_Clipboard
September 1st, 2006 @ 8:18 pm
I tried this and when i copy something it always pastes the text unknown. Here is how I want to use it.
September 7th, 2006 @ 9:56 am
This works great but isn’t it only half the process? Is there a similar method to paste in Firefox? I have a paste function working great on IE but I believe as with copy, Firefox does not allow access to the clipboard to paste.
September 7th, 2006 @ 11:14 am
I haven’t had the need to use a paste function in javascript, but you do have a good point Jeff. I’ll have to investigate this.
November 14th, 2006 @ 9:27 am
[…] For the past two weeks I’ve been working on my side project 2prong.com, and in the process I found myself looking for a way to copy text into a users clipboard via Javascript. Thankfully I stumbled across Jeff Larson’s page that included the 109 byte flash file necessary to pull this off. […]
November 15th, 2006 @ 6:08 am
I reworked this code so it now works with Opera 8.5. By taking out the createTextRange and instead using the window.clipboardData it seems to now work in Opera/IE/Firefox with now errors or warnings.
I posted the full code on my site.
November 28th, 2006 @ 11:58 am
Hi Jeff,
This is really neat solution. Are both files, the flash and script, licensed under GPL?
Thanks,
Henry
November 30th, 2006 @ 7:49 am
The application that the script and flash come from (Lussumo’s Filebrowser) is released under the GPL. The link for reference is in the post above.
November 30th, 2006 @ 3:29 am
Where is the source t othe _clipboard.swf? If you use GPL license of this code you must include the source…
But anyway thanks for the solution
January 19th, 2007 @ 8:55 am
Thanks a bunch for this recipe, works great!
February 22nd, 2008 @ 5:06 am
great!!!
It can support Chinese when use encodeURIComponent() replace to escape() .
February 25th, 2007 @ 6:29 pm
If you use GPL license of this code you must include the source…
The license restricts use and redistribution of the code, not the rights of the original copyright owner. You‘re free not to use the code if you don’t want to.
March 8th, 2007 @ 9:31 pm
I love this solution, but I need to copy text that contains special characters (plus signs, etc). How do I make this script retain special characters?
March 19th, 2007 @ 3:10 am
hi,
I have the same problem as Randyl. I need to copy special characters, but they all come out wrong (for example characters lika á é à ú ý þ æ ö .. they are only shown as “small boxes†when I paste them) does anyone know a way to fix this?
thank
Dean
April 21st, 2007 @ 6:29 am
the special character issue is not from the SWF but rather, from the +escape()+ call in javascript which does an encoding on special characters - remove that and you’re good to go however be careful, i’ve notice your data will be truncated if you have ” in your strings
April 25th, 2007 @ 4:12 pm
I guess I’ll go ahead a write this here too. ;)
I’ve found that changing the statement from +escape(text2copy)+ to +(text2copy)+ fixed the problem of displaying ä, ö, ü, etc. In other words, just remove the word escape. When I tried to remove the entire thing, copying wouldn’t work anymore (at least not in the way I was using it).
As to the data being truncated, I got around that by placing the text in a $variable and using echo addslashes($variable); to escape special characters and display the data.
Hope that helps someone.
March 20th, 2007 @ 7:37 am
i have tried setting this up with an invisible div and a button to call the copy but I can’t figure out why it isn’t working. I’m getting object expected on the line that the
March 21st, 2007 @ 6:21 pm
[…] Jeffothy’s Keyings » Clipboard Copy Cross-browser script to copy to clipboard. (tags: javascript flash clipboard) […]
March 27th, 2007 @ 2:51 pm
[…] du code est aussi présente ici. in categories: JavaScript / Rétrolien / Laisser un […]
April 4th, 2007 @ 9:29 pm
good
April 16th, 2007 @ 10:18 am
You are da man! Don’t forget to define BodyLoaded. I don’t know what that means, but maybe I missed something. Great tool!
April 20th, 2007 @ 12:50 pm
How do you do define body loaded?
April 21st, 2007 @ 3:27 pm
Very good job : this flashcopier is great ! Thank’s very much !
May 2nd, 2007 @ 11:37 pm
The script trucates ‘+’ signs even if I take out the escape. Any ideas?
May 2nd, 2007 @ 11:48 pm
I checked again this is really bas - ‘+’ signs are truncated and replaced with a space!
May 4th, 2007 @ 12:54 pm
Anyone have an idea about this (’+’ signs are been truncated)?
May 4th, 2007 @ 1:50 pm
Shaul,
I think what you mean by “truncated” is replaced by spaces.
The culprit of this issue is indeed the escape() function call in the supporting script.
I think you’ll find that if you replace the call to escape() with a call to encodeURIComponent(), you’ll find the plus signs will be copied as you expect.
As can be seen in the Javascript Documentation:
The escape() function encodes special characters, with the exception of:* @ - _ + . /
Now the problem is that the copy() function above actually adds an embed tag to the page with a flashvars attribute. The flashvars attribute is used by action script in the _clipboard.swf and the ‘+’ characters are interpreted as spaces.
The reason why using the encodeURIComponent() function works is because it encodes all characters for use in a URI, including the * @ - _ + . /
It’s a good point, and I’ll update the original post with this fix.
Thanks.
May 5th, 2007 @ 3:10 pm
YOU ARE A LIFE SAVER!
it worked!!
Thanks,
Shaul
May 11th, 2007 @ 3:34 pm
[…] somebody came up with ingenious way to bypass security setting (using flash to access clipboard), I’m not sure if I really want such thing bundled with the […]
May 14th, 2007 @ 7:55 am
This solution is great, but I’m having a secondary problem with it in Firefox. After this function runs, Firefox redraws my screen (IE does not), returning all fields in my form to their default values, which are different than the ones I just copied. Any ideas?
May 20th, 2007 @ 9:00 pm
[…] looking for a way to copy text into a users clipboard via Javascript. Thankfully I stumbled across Jeff Larson’s page that included the 109 byte flash file necessary to pull this off. It however seems to fail in Opera […]
May 21st, 2007 @ 4:03 pm
I have same problem of Harry.
I tried to put a “copy to clipboard” at bottom of WP comments text area: it works in IE but in Firefox (v2.0.0.3 ), textarea seems reset and text disappear…
Is there a solution?
Thanks
(sorry for my bad english)
June 10th, 2007 @ 8:13 pm
Hi. this code works for me in IE and Firefox, but not in Opera. Any thoughts?
June 12th, 2007 @ 9:55 am
This is pretty awesome, and I love you for it! Works perfect in my web applications!
July 6th, 2007 @ 5:26 pm
Thanks, this is great. Using it on my image hosting site. :)
August 1st, 2007 @ 3:09 pm
why all these gimmicks then, isn’t it easier to just use flash solution everywhere.
August 4th, 2007 @ 11:56 am
Need implementation assistance. I’m trying to use this function with a simple onclick call, shown below, but it is not working. Flash is installed and _clipboard.swf has been uploaded. Maybe I need to pass a variable for inElement?
[Copy URL to Clipboard]Also, I’d like an alert box that confirms the copy. Thanks for helping this js newb!
August 4th, 2007 @ 11:58 am
Sorry, my code came out as a link. Here’s my simple onclick call.
href=”#” onclick=”copy(inElement);return false;”
August 8th, 2007 @ 3:19 pm
In IE, I get BodyLoaded is undefined.
August 15th, 2007 @ 3:07 pm
function copy(inElement) {
if (inElement.createTextRange) {
var range = inElement.createTextRange();
// just remove the line i stroke through:
if (range
&& BodyLoaded==1)range.execCommand(’Copy’);
} else {
August 15th, 2007 @ 3:05 pm
Thanks, You’re a living god!
Much appreciated!
August 24th, 2007 @ 7:32 am
Thanks so much, great work! Very Very useful!
August 24th, 2007 @ 1:19 pm
IE keeps warning about Active Content. I don’t really want to show my users these messages. Is there any way to get around this?
September 20th, 2007 @ 5:15 pm
This does not work in IE7
October 1st, 2007 @ 12:48 pm
Beautiful. Thanks for all the work on this!…Do you know how I could take the clipboard contents and define it to a variable in php? I’d like to send an email that includes the contents of the textarea that has been copied and need to $_POST to another php file. Thanks!
October 5th, 2007 @ 5:43 am
Perfect Solution - very cool :)
But how can i paste the clipboard in firefox with Javascript (get the content of the clipboard).
October 12th, 2007 @ 4:31 am
CAN ANY GENIUS PEOPLE OUT THERE MAKE THIS WORK FOR OPERA AND IE7 .. I am a dummie so i cant be of much help…other than using the code u guys give me . but plsssss help . i want this badly or i will loose a big bet with my gf .
October 19th, 2007 @ 4:59 am
Hi Jeffrey,
I found your post after trying to solve the + sign problem. I’ve tweaked my own code to use encodeURIComponent - and the + sign is encoded properly - but when it’s pasted out of the clipboard, it’s set as %2B.
I’ve tried it using the _clipboard.swf you’ve provided out of an empty cache and I still get the %2B. Does this definitely work, or can you possibly send me the source to the SWF so I can have a go at debugging it?
Cheers.
October 19th, 2007 @ 7:37 am
Hi Remy,
Unfortunately I don’t have the source of the SWF to give you, as I stated in the blog post you commented on, Mark O’Sullivan of http://lussumo.com/ is where I found this solution. Maybe try contacting him?
Let me know if you get anywhere.
Jeffrey.
October 23rd, 2007 @ 6:45 am
For ExtJs users also usefull info.
http://extjs.com/forum/showthread.php?p=73084
October 25th, 2007 @ 10:29 am
Hi Jeffrey
Did you find a way how to pass line breaks (\n) in the textarea-field to the flash?
When I have textarea with multiple lines and I use this function and then copy the contents of the clipboard into notepad i get a multi-line output with IE but with Firefox all the linebreaks get replaced by squares.
October 25th, 2007 @ 10:35 am
i think i just found it out myself…. replaced the encodeURIComponent by this function
function escape_breaks(str) {
str = encodeURIComponent(str);
var newstring = str.replace(/%0A/g, “%0D%0A”);
return newstring;
}
October 28th, 2007 @ 3:27 am
跨瀏覽器的直接複製網址…
在IE底下可以很方便的，就由一個按鍵或是很直接的自動複製連結，那是因為IE可以操控到電腦的剪貼簿，但是Firefox、Opera、Safari等等的不可能簡單的利用Javascript達成啦！
所以在Google的幫助下…
October 29th, 2007 @ 2:55 pm
[…] Jeffothy provides us with swf (right-click, save link as) to use when copying to the clipboard. […]
November 9th, 2007 @ 6:10 am
Working great, but if I copy HTML code it is transformed (escaped).
How do I copy plain HTML instead of getting this:
;<a href="http://www.domain.com">
November 9th, 2007 @ 9:12 am
[…] http://www.jeffothy.com/weblog/clipboard-copy/ […]
November 9th, 2007 @ 9:13 am
wOw…. i really thank you…. you saved my life….
November 13th, 2007 @ 2:00 pm
Great!!!!! How can I make it work for multiple texts as working in this IE version? http://www.codingforums.com/archive/index.php?t-8911.html
November 13th, 2007 @ 2:12 pm
great! how can i make it work for multiple texts & links as working in this IE version?
http://www.codingforums.com/archive/index.php?t-8911.html
maybe combine that with this flash version?
November 15th, 2007 @ 12:32 pm
Great! Is it possible to have multiple copy links?
It was realized in this script (IE only) http://www.codingforums.com/archive/index.php?t-8911.html
November 17th, 2007 @ 1:42 am
Thank You!
It works like a charm :)
November 26th, 2007 @ 9:49 pm
[…] 2. Using a flash file that passes the copied text to the flash file via the flashvars property. [See] […]
November 27th, 2007 @ 12:48 am
I found a way to get around the special html characters issue that seems to occur using this method. I’ve written up a brief explanation here: http://forboden.com/2007/11/27/copy-to-clipboard-in-firefox-without-escaping-characters/
November 30th, 2007 @ 4:41 am
Hey Jeff - great work man!
Did you ever managet to find a solution for pasting FROM clipboard into browsers?
Cheers,
Adrian
December 3rd, 2007 @ 5:34 am
[…] to Jeffothy for the original DHTML solution of using encodeURIComponent() I updated this somewhat and made it write the myspace tag to a hidden […]
December 3rd, 2007 @ 9:22 am
We have improved the system so it can be called within a JavaScript function (and thus AJAX).
You can download it from here (the link is “Cliquez ici pour télécharger notre version”).
You just need to use copy(”Whatever you want”) from any script. Shall you need carriage return, add “\n” (without quotes) to your string.
January 8th, 2008 @ 6:43 pm
Thank you very much. This saved me a lot of time!
January 10th, 2008 @ 7:27 pm
Thank you very very very much ^Q^
January 18th, 2008 @ 4:49 am
[…] however, allows developers to freely copy the text to the clipboard. Jeffrey Larson came up with the solution using a really small swf file from his Javascript […]